How to use @media in CSS

Using @media in CSS

Using @media in CSS allows you to apply specific options based on media conditions, such as screen size, device orientation, or print settings.

Syntax-

/* Maximum width of 600 pixels for screen*/
@media screen and (max-width: 600px) {
 /* Your styles here */
}
/* Minimum width of 601 pixels for screen */
@media screen and (min-width: 601px) {
 /* Your styles here */
}
/* For print media */
@media print {
 /* Your styles here */
}

In the @media rule, you specify the media type (screen, print, speech, etc.) and media properties (such as max-width, min-width, orientation, etc.), with conditions parentheses in curly braces follow if you type the CSS code It must be enforced to meet the conditions specified.

if you want to change the font size when the screen width is less than or equal to 600 pixels

@media screen and (max-width: 600px) {
 body {
   font-size: 14px;
 }
}

You can also combine multiple situations with logical operators such as and, not, and only

@media screen and (min-width: 600px) and (max-width: 900px) {
 /* Your styles here */
}

This rule applies styles only when the screen width is between 600px and 900px

@media Questions have incredible potential for responsive design, ensuring your website looks great on a variety of devices and screen sizes

Example-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<style>
  /* Default styles */
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    text-align: center;
  }
 
  .container {
    width: 80%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
  }

  /* Media query for smaller screens */
  @media screen and (max-width: 600px) {
    .container {
      width: 90%;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <h1>Responsive design Example</h1>
    <p>This is a simple example of how you can use media queries to create a responsive design layout.</p>
  </div>
</body>
</html>

In the above example-

By default, the width of the .container element is 80%, and it consists of a central content area with some padding and a white background.
If the screen is 600 pixels wide or less, the .container is 90% wide instead of 80% wide. This keeps the location of the information intact and takes up available space on smaller screens.

Output-

Also, Read: Advanced Flexbox Layouts using HTML and CSS

articles

How to use @media in CSS

Using @media in CSS

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By