Media Queries in MindTouch Responsive
Media queries can be used to adapt the display of content by device width, aspect ratio, resolution, orientation, color index, and much more. In MindTouch Responsive, media queries are used to resize or realign elements based on the width of the screen they are viewed on. This width is calculated, not by pixels, but by character widths (em's) to take into account the differences between screen and font sizes. This means that you can use the same six media query statements for all screen resolutions (dpi) and even account for a user's browser zoom increasing the font size.
These are the media queries you will find in the MindTouch Responsive CSS. They have approximate pixel sizes above them to give you a general idea of the width.
/* 320px */ @media all and (min-width: 18.75em) /* 400px */ @media all and (min-width: 25em) /* 600px */ @media all and (min-width: 37.5em) /* 800px */ @media all and (min-width: 50em) /* 1044px */ @media all and (min-width: 65.25em) /* 1280px */ @media all and (min-width: 80em)
For the complete media query specification, please read Media Queries from the W3C.