Viewport
Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.
- Do not use large fixed width elements.
- Content should not rely on a particular viewport width to render well.
- Use CSS media queries to apply different styling for small and large screens.
Media Queries
Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation, and even resolution.
- Use media queries to apply styles based on device characteristic.
- Use min-width over min-device-width to ensure the broadest experience.
- Use relative sizes for elements to avoid breaking layout.
Fluid grids
When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet, or a 5.5-inch mobile phone.
- Flexible visuals.
- Feel across multiple devices.
- Flexible container resizes itself.
