Skip to main content

Use media queries to create a responsive site

This page applies to:MindTouch Responsive

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 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.