Responsive Design in CSS

Home / Topic / Responsive Design in CSS / Responsive Units and Media Queries

Responsive Units and Media Queries

In this chapter, we will explore two key tools that enable the creation of adaptable and flexible websites: responsive units and media queries. These techniques are fundamental for making your design fluid and suitable for different screen sizes.

Here the design is shown adapting to different screen sizes Here the design is shown adapting to different screen sizes

Responsive Units

Measurement units in CSS play a crucial role in responsive design. While absolute units like px (pixels) are fixed and do not adjust to the screen size, responsive units allow for more flexible designs.

Relative Units

Relative units adjust based on other elements on the page or the screen size. The most common ones are:

em: This unit is based on the font size of the parent element. If the parent font size is 16px, 1em will equal 16px. If the parent's font size changes, the em value will also change.
rem: Similar to em, but it is based on the root document's font size (the html). This means that 1rem will be equivalent to the font size of the html element, which is typically 16px unless changed.
vw and vh: These units are based on the width and height of the viewport, respectively. 1vw is 1% of the screen's width, and 1vh is 1% of the height.

Let's see an example of how to use these units:

css

"In this code, the body font size is set to 16 pixels. Then, the h1 title uses 2 rems, which means it will be double the body size, that is, 32 pixels. Paragraphs will have 1.5 rems, which means 24 pixels. Finally, the container class takes up 80 percent of the screen width using the viewport width unit, vw."

Media Queries

Media queries are the foundation of responsive design as they allow different styles to be applied based on the characteristics of the device or viewport, such as the width, height, orientation, and even the screen resolution.

Structure of a Media Query

The basic structure of a media query is:

css

The condition can be, for example, the screen width:

css

"Here we are using a media query that applies when the screen has a maximum width of 768 pixels. Within the media query, we establish that the container class width will be 100 percent and have a padding of 1 rem. This means that for smaller screens, the box will fully expand and have more space around it."

Using Media Queries for Different Devices

A common practice in responsive design is defining several breakpoints to adjust the design depending on the device. Below is an example of how we can use different media queries for different screen sizes:

css

"In this code, we first define the general styles for large screens. Then, we use three different media queries to adjust the design according to breakpoints. These points include 1024 pixels for tablets, 768 pixels for mobiles in landscape mode, and 480 pixels for mobiles in portrait mode."

Example of Responsive Units and Media Queries in Action

Let's combine what we've learned so far into a practical example:

html

"This example combines responsive units such as vw for the container width, rem for font sizes, and a media query that adjusts the design when the screen width is less than 768 pixels. As the screen width decreases, the container will expand to 100 percent of the available width, and the padding will be reduced to 1 rem so that the content looks good on small screens."

Conclusion

Proper use of responsive units and media queries is crucial for creating adaptable and accessible websites. These tools allow you to design interfaces that adjust perfectly to any device.

Back to previous chapter

Mark as read and continue

Ask me anything