When you design a website, it’s really important that your content looks good on all screen sizes.

In this article, I’ll talk about using responsive design and media queries to achieve this goal. I’ll also provide code examples for media queries using maximum and minimum screen widths.

What is responsive design?

Responsive design is a good way to make sure your content looks good on all screen sizes. Everything in your website, including layout, fonts, and graphics, should automatically adapt to the user’s device.

In the early 2000s, developers focused on making sure their websites looked good on larger screen sizes, such as laptops and desktops. In today’s world, you have to think about devices like phones, tablets, and even watches.

An important part of responsive design is media queries.

What is media inquiry?

In CSS, media queries are used to apply a set of styles based on the characteristics of the browser, including width, height, or screen resolution.

You can see an example of a media query on the freeCodeCamp learning page.

For large screen sizes like desktops, you can see a search menu in the upper left corner.

But on mobile devices, there’s no search menu, we just have menu options and a login button.

Basic syntax for media queries

The following is the basic syntax for media queries in CSS.

@media media-type (media-feature){
/*Styles go here*/
}
Copy the code

Let’s analyze what this grammar means.

@media is an at-rule in the CSS. These rules determine the appearance of the CSS based on certain criteria.

Media type Refers to the media type of the device. Different media types include all, Print, Screen, and Speech.

  • All – Applies to all devices
  • Print – For devices with media in print preview mode
  • Screen – For devices with screens
  • Voice — for devices like screen readers that read out loud to the user.

According to the documentation.

The media type is optional, and the all type is implied, except when the not or only logical operators are used.

You can choose to omit the media type and use this syntax instead.

@media (media-feature){
/*Styles go here*/
}
Copy the code

Media characteristics refer to the characteristics of the browser, including the height and width, orientation, or aspect ratio of the viewport. For a complete list of possible media characteristics, visit the MDN documentation.

In this article, we will focus on width media features.

If you want to create more complex media queries, you can use logical operators.

  • and– This operator is used to concatenate multiple media features. If all media characteristics are true, then the styles in braces will be applied to the page.
  • not– This operator reverses true queries to false and false queries to true.
  • .(comma) – This operator separates multiple media features with commas, and if one of the conditions is true, the styles in braces are applied.

Media Query example

Let’s look at a few examples of how to use media queries in CSS.

In the first example, we want the background color to be blue when the device is 600px or less wide.

In CSS, we add a (max-width: 600px) for the media query that tells the computer to target devices with screen widths of 600px or less.

In the media query, we changed the body’s background style to background-color: #87ceeb; .

Here is the full media query.

@media (max-width: 600px) {
  body {
    background-color: #87ceeb; }}Copy the code

Here’s an example of CodePen. If you click Edit on CodePen in the upper right corner, you can test it on CodePen.

In this second example, if the device is between 600 and 768px wide, we want to change the background color from blue to red. We can do this using the and operator.

@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: #de3163; }}Copy the code

Here’s the full CodePen example for you to try.

When you test, you should see that if the screen width is below 600px or above 768px, the background color is blue.

Should you write separate media queries for every device on the market?

The short answer to that question is no.

There are too many devices on the market to write a media query for each one. Technology is changing all the time, which means new devices will be coming out all the time.

More importantly, you need to use media queries for a range of devices. In Cem Eygi’s freeCodeCamp article, he lists some common breakpoints for media queries.

  • 320 px – 480 px. Mobile devices
  • 481px — 768px: iPad, tablet
  • 769 px – 1024 px. Small screens, laptops
  • 1025 px – 1200 px. Desktop, big screen
  • 1201px and above – extra large screen, TV

conclusion

Responsive design is a good way to make sure your content looks good on all screen sizes. Everything in your website, including layout, fonts, and graphics, should automatically adapt to the user’s device.

In CSS, media queries are used to apply a set of styles based on the characteristics of the browser, including width, height, or screen resolution.

The following is the basic syntax for media queries in CSS.

@media media-type (media-feature){
/*Styles go here*/
}
Copy the code

The media type is optional unless you use the not or only logical operator. If the media type is omitted, the media query is for all devices.

I hope you found this article helpful, and good luck with your CSS journey.