Using media queries.

Using media queries.

ยท

3 min read

What are media queries?

It is a way of applying styles or running other code based on specific characteristics, features, and browser preferences. It allows us to conditionally use styles based on different media types like print, screen etc. media queries are mostly used to apply styles based on the viewport so that web developers can develop responsive websites across different screen sizes. In this article, we are going to discuss the same.

Syntax

Untitled-2022-11-27-1146.png

@media

Media queries use the @media rule to apply different styles to different types of media and devices based on the type of media.

screen

the screen is the media type we are using here, it matches devices with a screen, and we can also use different media types like print to the printer.

and

The media query supports logical operators, which enable us to match media types based on certain conditions.

max-width

max-width is the media feature we are defining here, and we can apply some styles when the features match. The max-width specifies a width less or equal to the specified width. All the styles will apply when the width is less than the specified width.

min-width

This is another media feature we can define instead of max-width, min-width specifies a width greater or equal to the specified width. All the styles will apply when the width is greater than the specified width.

Example 1 min-width

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries</title>
  </head>
  <style>
    @media screen and (min-width: 768px) {
      body {
        background-color: #3944f7;
      }
      h1 {
        font-size: 50px;
      }
    }
  </style>
  <body>
    <h1>Media Queries</h1>
  </body>
</html>

gif

Notice that in the above gif when I increase the window size to greater than 768 px our styles get applied, the background color changes, and the font size of the heading becomes 50px. Try running the code on your system and check the output.

Example 2 max-width

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries</title>
  </head>
  <style>
    @media screen and (max-width: 768px) {
      body {
        background-color: #3944f7;
      }
      h1 {
        font-size: 50px;
      }
    }
  </style>
  <body>
    <h1>Media Queries</h1>
  </body>
</html>

gif

Notice that in the above example styles only apply when the window width is less than and or equal to 768px.

Using and operator

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries</title>
  </head>
  <style>
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      body {
        background-color: #3944f7;
      }
      h1 {
        font-size: 50px;
      }
    }
  </style>
  <body>
    <h1>Media Queries</h1>
  </body>
</html>

gif

Notice in the above example that styles only apply when the window width is greater than or equal to 768px and less than or equal to 1200px.

Using print media-type

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries</title>
  </head>
  <style>
    body {
      background-color: #3944f7;
    }
    h1 {
      font-size: 100px;
      color: #b4161b;
    }
    @media print {
      body {
        background-color: #ffffff;
      }
      h1 {
        font-size: 20px;
        color: #000000;
      }
    }
  </style>
  <body>
    <h1>Media Queries</h1>
  </body>
</html>

The print media type matches the document type viewed in the print preview

webpage with normal styles

Screenshot from 2022-11-27 19-29-14.png

styles applied on print preview

Screenshot from 2022-11-27 19-29-25.png

Did you find this article valuable?

Support Ankit Kumar by becoming a sponsor. Any amount is appreciated!