Exploring additional examples of media queries reveals their effectiveness in customizing style sheets for diverse devices.
As a straightforward illustration, we can adjust the background color based on the device being used.
Example
/* Set the background color of body to tan */ |
In this example, media queries are utilized to develop a responsive navigation menu that adapts its design according to different screen sizes.
Large screens:
Small screens:
Example
/* The navbar container */ |
A prevalent application of media queries involves crafting adaptable layouts. In this instance, we establish a layout that transitions between configurations featuring four, two, or full-width columns, contingent upon varying screen sizes.
Example
/* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; } /* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { .column { width: 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) { .column { width: 100%; } } |
Note: A contemporary approach to constructing column layouts is through CSS Flexbox (see example below). However, this method lacks support in Internet Explorer 10 and earlier versions. For compatibility with IE6-10, the usage of floats is recommended (as demonstrated above). For further insights into the Flexible Box Layout Module, consult our CSS Flexbox chapter. To delve deeper into Responsive Web Design, explore our Responsive Web Design Tutorial. |
Example
/* Container for flexboxes */ |
Another prevalent application of media queries involves concealing elements on varying screen sizes.
Example
/* If the screen size is 600px wide or less, hide the element */ |
Media queries can also be employed to adjust the font size of an element across different screen sizes.
Example
/* If screen size is more than 600px wide, set the font-size of <div> to 80px */ @media screen and (min-width: 600px) { div.example { font-size: 80px; } } /* If screen size is 600px wide, or less, set the font-size of <div> to 30px */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } } |
In this instance, media queries are combined with flexbox to craft a responsive image gallery.
Example
Adjust the size of the browser window to observe the responsive behavior.
In this illustration, media queries are employed alongside flexbox to design a responsive website featuring a versatile navigation bar and adaptable content layout.
Orientation: Portrait / Landscape
Media queries can additionally modify the layout of a page based on the orientation of the browser.
You can specify a group of CSS properties that will exclusively take effect when the browser window is wider than its height, denoted as “landscape” orientation.
Example
Apply a light blue background color when the orientation is in landscape mode.
@media only screen and (orientation: landscape) { body { background-color: lightblue; } } |
You can utilize the (max-width: ..) and (min-width: ..) values to establish both a minimum and a maximum width.
For instance, adjust the styling of a <div> element when the browser’s width falls within the range of 600 to 900 pixels.
Example
@media screen and (max-width: 900px) and (min-width: 600px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } } |
Incorporating an additional value: In the following example, we introduce an extra media query to our existing one by employing a comma.
Example
/* When the width is between 600px and 900px or above 1100px – change the appearance of <div> */ |
For a comprehensive understanding of all media types and features/expressions, please refer to the @media rule in our CSS reference.
Tip: To delve deeper into responsive web design—targeting various devices and screens, employing media query breakpoints—explore our Responsive Web Design Tutorial.