Loading lesson path
Concept visual
Media queries are a popular technique for delivering a tailored style sheet to different devices. To demonstrate a simple example, we can change the background color for different devices:
Use media queries to change the background color for different viewport widths: /* Base style for mobile devices */
body {Formula
background - color:olive;
color: white;
}
/* For devices with a minimum width of 768px (Medium) */
@media screen and (min-width: 768px) {body
{
background-color: blue;color:
white;
}
}/* For devices with a minimum width of 992px (Large) */
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes:
* {
box-sizing: border-box;
}
/* Container for flexboxes */.container {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */.column {
flex: 25%;
padding: 20px;
}/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {.column {
flex: 50%;
}
}/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {.container {
flex-direction: column;
}
}To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter. To learn more about Responsive Web Design, read our Responsive Web Design Tutorial.
Here, we use media queries to create a responsive navigation menu, that varies in design on different screen sizes.
Example ul {
list-style-type: none;
margin: 0;padding:
0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}/* For viewport width 600px or less, make the menu links stack on top of each other */
@media screen and (max-width: 600px) {
ul {flex-direction: column;}
}Here, we use media queries to hide an element on small screens: I will be hidden on small screens.
/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}Here, we use media queries to change the font size of an element on different viewport widths:
Formula
/* If viewport width is 600px or more, set font - size to 80px */
@media screen and (min - width:600px) {
#div1 {
font-size: 80px;
}
}Media queries can also be used to change the layout of a page depending on the orientation of the screen.
Formula
Here, we change the background - color of the body, if the screen orientation is in landscape mode:@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}Some users have motion sensitivity and prefer websites with less animation. The prefers-reduced-motion media feature lets you check if a user has asked to reduce motion, such as animations or transitions. Use this feature to turn off animations and transitions for the users who has activated this setting on their computer:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}Here, we use media queries together with flexbox to create a responsive image gallery:
Here, we use media queries together with flexbox to create a responsive website:
To learn more about responsive web design, read our Responsive Web Design Tutorial.