Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document.
Metro UI CSS 0.15.8.11
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="modern-responsive.css" rel="stylesheet">
* for hdpi devices you can be add param target-densitydpi=device-dpi to meta viewport
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
Metro UI CSS supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
| Layout width | Column width | Gutter width | |
|---|---|---|---|
| Large display | 1200 px and up | in progress... | in progress... |
| Default | 980px and up | 60px | 20px |
| Portrait tablets | 768px and above | 42px | 20px |
| Phone to tablets | 767px and below | Fluid columns, no fixed width | |
| Phones | 480px and below | Fluid columns, no fixed width | |
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }