Media Query Example 1

January, 2021

Try resizing the screen!

Change the background color at a specified viewport width.

Use a mobile-first approach: that simply means the initial design is aimed at the smallest viewport size (typically a cell phone).

How do you select the breakpoints? This is a DESIGN-DRIVEN decision, not a DEVICE-DRIVEN decision. Years ago breakpoints were based on specific devices; now there's no way to keep up. Rather, look at your design and decide where the breakpoints should occur. Chrome offers great tools for this, but that's another topic.

HTML

<body>

<header>
    <h1>Media Query Example 1</h1>
</header>


<main>
    <p>Change the background color at a specified viewport width.</p>
    <p>Use a mobile-first approach: that simply means the initial design is aimed at the smallest viewport size (typically a cell phone).</p>
    <p>How do you select the breakpoints? This is a DESIGN-DRIVEN decision, not a DEVICE-DRIVEN decision. Years ago breakpoints were based on specific devices; now there's no way to keep up. Rather, look at your design and decide where the breakpoints should occur. Chrome offers great tools for this, but that's another topic.</p>
</main>

</body>

CSS

/* Set the background color for the mobile version -- mobile-first design */

body {
    background-color: yellow;
}

/* Create a media query to change the background color to white when the viewport exceeds 800px. Note there are two sets of brackets here */

@media screen and (min-width: 800px) {
    body {
    background-color: white;}
}