- A flexible grid
- Flexible images
- CSS media queries
- The viewport meta element
Rather than remaining at a static width, responsive sites use methods that allow them to squeeze and flow into the available browser space.
Images and other embedded media need to be able to scale to fit their containing elements.
Media queries give us a way to deliver sets of rules only to devices that meet certain criteria, such as width and orientation.
Pages optimised 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.
To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
In order to solve this, we should use the following meta settings:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…Conclusion:
We are building our site considering the viewport size. By default, mobile browsers render the viewport to 980 pixels (or points, for Apple devices), but the actual mobile screens may be smaller. So the viewport is shrunk and our site will be shrunk as well.
By having the same size of viewport and screen, we guarantee that the page will be displayed as we intended. For example, if the device's screen is 320 pixels wide, the rendering viewport on that device will also be 320 pixels across (not 980) and will appear on the screen full size (not shrunk).