Media Queries

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query</title>
    <link rel="stylesheet" href="css/media.css">
</head>
<body>
    <main>
        <h1>I Love Responsive Web Design!</h1>
        <p>Media queries are one of the primary components of responsive design. Web design is responsive when it changes based on things like viewport size, device, and screen orientation. </p>
    </main>
</body>
</html>

CSS Example

main {
    background-color: darkcyan;
    text-align: center;
}

h1 {
    font-size: 60px;
}

p {
    font-size: 32px;
}

@media screen and (max-width: 800px) {
    main {
      background-color: aquamarine;
    }
    h1 {
        font-size: 42px; 
    }
    p {
        font-size: 24px; 
    }
}