CSS Media Queries – More Examples #
Let us look at some more examples of using media queries.
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:
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
} Media Queries For Menus #
In this example, we use media queries to create a responsive navigation menu, that varies in design on different screen sizes.
Example #
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
} 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:
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.
Example #
/* Container for flexboxes */
.row {
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) {
.row {
flex-direction: column;
}
}
Hide Elements With Media Queries #
Another common use of media queries, is to hide elements on different screen sizes:
/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
} Change Font Size With Media Queries #
You can also use media queries to change the font size of an element on different screen sizes:
Flexible Website #
In this example, we use media queries together with flexbox to create a responsive website, containing a flexible navigation bar and flexible content.
Resize the browser window to see the responsive effect. #
My Website #
With a flexible layout.
About Me #
Photo of me: #
Some text about me in culpa qui officia deserunt mollit anim..
More Text #
Lorem ipsum dolor sit ame.
TITLE HEADING #
Title description, Dec 7, 2017 #
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADING #
Title description, Sep 2, 2017 #
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Orientation: Portrait / Landscape #
Media queries can also be used to change layout of a page depending on the orientation of the browser.
You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called “Landscape” orientation:
Example #
Use a lightblue background color if the orientation is in landscape mode:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
} @media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
} Using an additional value: In the example below, we add an additional media query to our already existing one using a comma (this will behave like an OR operator):
Example #
/* When the width is between 600px and 900px OR above 1100px - change the appearance of */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Powered by BetterDocs