Categories
web

How to use media queries to make responsive CSS designs

Media queries are useful when you want to modify your site or app depending on a device’s general type — such as print vs. screen — or specific characteristics and parameters — such as screen resolution or browser viewport width.

We write a media query like this:

@media (min-width: 600px) {/* CSS goes here */}

Media queries are crucial in creating responsive web experiences. With media queries, we can apply different CSS to different devices and screen sizes. A media query checks for a condition and then applies CSS if that condition is met. In the above example, the media query is checking to see if the browser width is a minimum of 600px wide or more.

In this video, we look at how to implement a media query.

In the video below, we use a media query to change the layout of HTML elements based on the browser width.

Here is the completed CodePen for your reference.