Media queries in MindTouch

Last updated
Save as PDF

Applies to:: All MindTouch Versions
Role required:: N/A

Media queries are a CSS3 module that allows the content of your site to render responsively to the device it is loaded on.

Media queries in Expert

Media queries can be used to adapt the display of content by device width, aspect ratio, resolution, orientation, color index, and much more. In Expert, 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.

The following are media queries you will find in the Expert 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, read Media Queries from the W3C.