Skip to main content
MindTouch Success Center

Use media queries to create a responsive site

This page applies to:MindTouch (current)

Media queries are a CSS3 module that allows the content of your site to render responsively to the device it is loaded on. This means that you can style your site in a way that it will adapt to the screen resolution and size of the device used to view it; whether, it be a phone, tablet, or desktop.

 

Media queries in MindTouch


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.
 

The following are media queries you will find in the MindTouch 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.