CSS Media Queries

Media queries are used to control the presentation of a web page based on the viewing environment. For example, you can use media queries to change the layout of your web page for different screen sizes, or to change the font size for different resolutions.

The @media Rule

Media queries are written using the @media rule. The @media rule is followed by a comma-separated list of media queries. Each media query is a set of conditions that must be met for the CSS rules that follow the media query to be applied.

For example, the following media query will apply the following CSS rules to all devices with a width of at least 600 pixels:

@media (min-width: 600px) {
  .my-element {
    width: 50%;
  }
}

Media Query Types

There are three main types of media queries:

Screen: Screen media queries are used to target devices with screens, such as laptops, desktops, and tablets.
Print: Print media queries are used to target printers.
Resolution: Resolution media queries are used to target devices with different resolutions, such as high-definition (HD) and standard-definition (SD) devices.

Media Query Operators

Media queries can use a variety of operators to combine multiple conditions. The following operators are supported:

and: All conditions must be met.
or: At least one condition must be met.
not: The condition must not be met.

For example, the following media query will apply the following CSS rules to all devices with a width of at least 600 pixels and a height of at least 400 pixels:

@media (min-width: 600px) and (min-height: 400px) {
  .my-element {
    width: 50%;
  }
}

Task

To make the portfolio responsive copy past the below code. Run the code and experiment with the code to get used to it.

@media screen and (max-width: 600px) {
    header img {
        float: none; /* Remove float */
        margin-right: 0;
    }

    /* Adjust font size for smaller screens */
    header h1 {
        font-size: 24px;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://learnwith.tumkurlab.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 10px;
         }
        ul li {
            margin: 5px 0;
        }
        ol {
            border: 2px solid #ccc;
            padding-left: 20px;
        }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        form {
            background-color: #f2f2f2; /* Light gray */
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        /* Add the code below */
         
         /* Add the code above */
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://learnwith.tumkurlab.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purr-sollicitudin, ipsum ac varius catnip, tortor purr-tincidunt tortor, in scelerisque massa metus sit amet lectus. Phasellus auctor, tortor non varius suscipit, lorem miow bibendum ipsum, vel sodales felis arcu ac leo. Fusce id nibh purr-lacinia felis cursus suscipit. Nullam eget miow-cat amet neque volutpat condimentum. Proin in tempus metus. Nulla facilisi. Nulla miow felis, dignissim id justo vel, dictum venenatis justo.

Aenean ut ligula miow ipsum dolor sit amet meow consectetur adipiscing elit. Integer ac est ut metus bibendum fringilla. Curabitur blandit, turpis eget purr-eleifend consectetur, felis felis blandit ipsum, nec gravida tortor nisi eget ligula. Fusce metus velit, bibendum eget scelerisque a, purr-cursus quis nunc. Nulla meow felis, lacinia vitae sapien quis, venenatis cursus ipsum. Maecenas miow eu odio non purr-convallis. Meow eget nulla id nulla ultricies ultricies. Nullam non purr-sapien, ac venenatis miow. Integer eu sapien vel urna miow vestibulum. Fusce non purr-risus, eu vulputate metus.

Purr velit libero, scelerisque ut neque sed, viverra tristique justo. Maecenas metus felis, miow nec iaculis ut, dignissim ac purr-est. Aliquam erat volutpat. Aenean miow, arcu nec vestibulum venenatis, leo urna convallis purr-scelerisque. Suspendisse potenti. Suspendisse miow libero, pellentesque a purr-suscipit eget, pharetra id est. Meow eget metus quis quam tincidunt laoreet. Maecenas nec ipsum meow ipsum euismod malesuada. Sed vel ipsum sed urna gravida eleifend. Nulla eget felis eu nibh dictum imperdiet. Nulla nec semper lacus, quis vulputate purr-miow in fermentum. Ut quis purr-tortor et nunc scelerisque ultricies. Maecenas sed miow non miow volutpat elementum.
</p>
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

Media queries are a powerful tool for creating responsive web pages that look good on all devices. By understanding how media queries work, you can create web pages that are accessible to everyone.

Here are some tips for using media queries:

Use media queries to create layouts that are fluid and responsive.
Use media queries to change the font size for different resolutions.
Use media queries to add or remove elements from the page for different screen sizes.
Use media queries to target specific devices, such as tablets or phones.

CSS Media Queries

Add LearnWebstack.com to your Homescreen!