Responsive design means developing a website so it automatically adapts its layout and appearance to fit the screen size of whatever device is being used. This ensures a webpage is presentable and accessible on mobile, tablet, and desktop devices.
If responsiveness is not taken into consideration while developing a website, the website and its content will only look presentable and legible on whatever screen size was taken into consideration during development. Websites are platforms that can be accessed using any kind of device, therefore the different devices that might be used must be taken into consideration during development.
To achieve responsiveness, there are different tools that must be understood. This includes knowing the difference between absolute and relative units, making flexbox or grids flexible so they expand or contract according to screen size, and also media queries which are used to dictate sizes according to screen sizes.
The Viewport Meta Tag
Before any CSS responsiveness technique can work correctly on mobile devices, the following tag must be present in the <head> of the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without this tag, mobile browsers will default to rendering the page at a desktop width and scaling it down — which means media query breakpoints will be bypassed entirely and the page will not respond to screen size as expected. This tag is a prerequisite for responsive design.
The Role of Absolute and Relative Units
Absolute and relative units are metrics used to define the values of HTML element properties like width, height, margins, padding, or font-size. Absolute units are fixed and do not change according to screen sizes, while relative units are fluid and expand or contract according to screen size.
Both unit categories have situations where they are best to use. Absolute units are best used when dealing with HTML element properties that do not need to change according to screen size — things like setting the borders and border-radius of a container, or applying a drop shadow. Relative units, on the other hand, are flexible and fluid.
For responsiveness, relative units are best used so HTML elements can look just right on mobile devices, and can also expand to look bigger on desktop devices with bigger screens. Relative units used in these cases are percentage %, rem and em units, and viewport height or width (vh/vw).
Media Queries and Mobile-first Design
Media queries are a CSS feature primarily used for making websites responsive. They work by specifying the maximum or minimum width of a screen size, then dictating the size of an HTML element inside the media query if the screen size matches.
When working on responsiveness, developers get to decide what screen size to start with:
- Desktop-first — Base styles are written for large screens, and
max-widthmedia queries are used to adjust the layout for smaller screens. - Mobile-first — Base styles are written for small screens, and
min-widthmedia queries are used to progressively expand the layout for larger screens.
Mobile-first is the industry standard today, as it prioritises the most constrained screen size and scales up from there.
Desktop-first Example
/* Base styles target desktop */
.container {
flex-direction: row;
}
/* Adjust for screens 600px wide or less */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
Mobile-first Example
/* Base styles target mobile */
.container {
flex-direction: column;
}
/* Expand for screens 600px wide or more */
@media (min-width: 600px) {
.container {
flex-direction: row;
}
}