CSS Media Queries
Responsive web pages rely on media queries, which apply styles according to the characteristics of the device or environment showing the page.
They are added to a style sheet through the CSS @media rule.
Use Mediaqueries to Add a Breakpoint
The previous page built a grid layout web page. It now needs a breakpoint, so that a media query can rearrange its grid items on bigger screens.
Example
The media query in this example sets a breakpoint at 600px:
Prompt
Create a responsive grid layout page with a header, menu, content, facts sidebar, and footer. By default (mobile), all items stack in a single column. Add a media query at 600px min-width that rearranges items into a 6-column grid: header spans all 6, menu spans 1, content spans 4, facts spans 1, footer spans all 6.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a Breakpoint</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.header { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu { background-color: #33b5e5; color: white; padding: 15px; }
.content { background-color: #f1f1f1; padding: 15px; }
.facts { background-color: #ccc; padding: 15px; }
.footer { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu ul { list-style-type: none; padding: 0; }
.menu li { padding: 8px 0; }
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
}
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 6 / span 1; }
.footer { grid-column: 1 / span 6; }
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h1>Header</h1></div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="content">
<h2>The City</h2>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="facts">
<h2>Facts</h2>
<p>Chania was founded in 1252.</p>
</div>
<div class="footer"><p>Footer</p></div>
</div>
</body>
</html>
Another Breakpoint
Breakpoints are not limited in number, so add as many as you like.
Example
These media queries add two breakpoints, one for screens of at least 600px and one for screens of at least 768px:
Prompt
Create a responsive grid layout with header, menu, content, facts, and footer sections. Use two media query breakpoints: at 600px, rearrange into a grid where menu is 1 column, content is 4 columns, facts goes to its own row spanning all 6; at 768px, move facts next to content (1 column) so menu, content, and facts share the same row.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Breakpoint</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.header { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu { background-color: #33b5e5; color: white; padding: 15px; }
.content { background-color: #f1f1f1; padding: 15px; }
.facts { background-color: #ccc; padding: 15px; }
.footer { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu ul { list-style-type: none; padding: 0; }
.menu li { padding: 8px 0; }
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
}
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 1 / span 6; }
.footer { grid-column: 1 / span 6; }
}
@media (min-width: 768px) {
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 6 / span 1; }
.footer { grid-column: 1 / span 6; }
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h1>Header</h1></div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="content">
<h2>The City</h2>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="facts">
<h2>Facts</h2>
<p>Chania was founded in 1252.</p>
</div>
<div class="footer"><p>Footer</p></div>
</div>
</body>
</html>
Typical Device Breakpoints
Screens and devices come in so many heights and widths that an exact breakpoint for each one is hard to create. Targeting five common groups keeps things simple.
Example
Prompt
Create a page that demonstrates typical responsive breakpoints by changing the background color of the body at five common widths: 600px and down (extra small), 600px and up (small), 768px and up (medium), 992px and up (large), and 1200px and up (extra large). Display text indicating the current size range.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typical Device Breakpoints</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
}
.size-label { font-size: 30px; }
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
body { background-color: lightcoral; }
.size-label::after { content: "Extra Small (600px and down)"; }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body { background-color: lightsalmon; }
.size-label::after { content: "Small (600px and up)"; }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
body { background-color: lightyellow; }
.size-label::after { content: "Medium (768px and up)"; }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
body { background-color: lightgreen; }
.size-label::after { content: "Large (992px and up)"; }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
body { background-color: lightblue; }
.size-label::after { content: "Extra Large (1200px and up)"; }
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p class="size-label"></p>
</body>
</html>
Media Queries for Screen Orientation
A page's layout can also respond to the orientation of the screen through media queries.
In landscape mode, the background color of the body changes in this example:
Example
Prompt
Create a page that uses a media query to change the background color of the body to lightblue when the screen orientation is landscape mode.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orientation Media Query</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width is greater than the height (landscape mode), the background color will be lightblue.</p>
</body>
</html>
Hide Elements With Media Queries
On small screens, the media query below hides an element from view:
Example
Prompt
Create a page with a div element containing the text "I will be hidden on small screens." Use a media query to hide this element when the viewport width is 600px or less.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Elements With Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#div1 {
background-color: lightgreen;
padding: 20px;
font-size: 24px;
}
/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
</head>
<body>
<div id="div1">I will be hidden on small screens.</div>
<p>Resize the browser window to hide the green box when the width is 600px or less.</p>
</body>
</html>
Change Font Size With Media Queries
As the viewport width changes, the media query below adjusts the font size of an element:
Example
Prompt
Create a page with a div element containing some text. Use a media query to change the font size of that element to 80px when the viewport width is 600px or more.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Size With Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#div1 {
background-color: lightblue;
padding: 20px;
}
/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
<p>Resize the browser window to see the font size change at 600px.</p>
</body>
</html>
Media Queries for User Preferences
People with motion sensitivity tend to prefer websites with less animation.
Whether a user has asked for reduced motion, such as fewer animations or transitions, can be checked with the prefers-reduced-motion media feature. If that setting is active on their computer, this feature lets you turn animations and transitions off.
Example
Prompt
Create a page with an animated element (e.g., a box that moves across the screen). Add a prefers-reduced-motion media query that disables all animations and transitions when the user has requested reduced motion in their system settings.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reduced Motion Media Query</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
animation: moveBox 3s infinite alternate;
}
@keyframes moveBox {
from { left: 0; }
to { left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h2>Prefers Reduced Motion</h2>
<p>If you have "reduce motion" enabled in your system settings, the box below will not animate.</p>
<div class="box"></div>
</body>
</html>