CSSMedia Queries - Examples
CSS Media Queries Examples
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:
Example
Use media queries to change the background color for different viewport widths:
body {
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;
}
}
Media Queries For Columns
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:
Large screens:
Medium screens:
Small screens:
Example
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.
Media Queries For Menus
Here, we use media queries to create a responsive navigation menu, that varies in design on different screen sizes.
Example
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;}
}
Hide Elements With Media Queries
Here, we use media queries to hide an element on small screens:
Example
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
Change Font Size With Media Queries
Here, we use media queries to change the font size of an element on different viewport widths:
Example
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
Media Queries for Screen Orientation
Media queries can also be used to change the layout of a page depending on the orientation of the screen.
Here, we change the background-color of the body, if the screen orientation is in landscape mode:
Example
body {
background-color: lightblue;
}
}
Media Queries for User Preferences
Some users have motion sensitivity and prefer websites with less animation.
Theprefers-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:
Example
* {
animation: none !important;
transition: none !important;
}
}
Responsive Image Gallery
Here, we use media queries together with flexbox to create a responsive image gallery:
Example
Try it Yourself »Responsive Website
Here, we use media queries together with flexbox to create a responsive website:
Example
Try it Yourself »CSS Responsive Web Design
To learn more about responsive web design, read ourResponsive Web Design Tutorial.
