Responsiveness
As we build our websites, we are most likely writing them on a single computer and using a specific monitor or browser size to test them. But, as we know, there are many possible screen sizes that exist and we can’t assume that our website visitors will be using the exact same screen size as ours. To prepare for this, we can try to build our websites responsively, so they can adapt to the variety of device dimensions and scales as best as possible.
The first step in making our website responsive is to include this meta tag in the <head> element of every html document:
This will let the browser know how it should adjust the dimensions and scaling of elements on the page depending on the device being used.
This will account for making most of the default behaviors and scaling of html elements responsive, but there’s a good chance that our website structures and layouts will be more complex than just unstyled html documents. To exercise more control over our pages’ responsiveness, we can use responsive units when sizing our elements and media queries for larger structural changes at different screen sizes.
Responsive Units
Responsive units allow us to size our elements relative to one another, so that everything on our webpage scales accordingly when the screen size or browser size changes.
Here’s a quick summary of responsive units:
- % is relative to the parent element’s size
- VW, VH are relative to the viewport’s (browser window or screen) size
- EM is relative to the current element or parent element’s font-size
- REM is relative to the root element’s (<html>) font-size
Media Queries
Media queries are used to define browser-size breakpoints. This way we can adjust the design of our page as we lose or gain space with different screen sizes, allowing us to create distinct layouts for different screen sizes. Let’s consult w3schools as we practice using media queries:
Keep in mind that there are a lot of ways to prepare our documents and elements to be entirely or mostly responsive without the need for media queries — unstyled HTML is almost entirely responsive by default! In general, the more complex or further we move away from default html behaviors/structures, the more we will likely need to fine tune the page with media queries or flexible css properties.