2.1 Media Queries Basics
Media queries are a key tool for creating responsive websites. They help you adapt styles for different devices and screen sizes, ensuring optimal display and usability. Below, we'll look at the basics of using media queries, their syntax, and examples of adapting styles for various screens.
Media queries use the @media rule, which allows you to apply certain styles only when specific conditions are met. Conditions can include screen sizes, resolution, orientation, and other parameters.
Syntax:
@media media-type and (media-feature) {
/* styles */
}
Where:
media-type: the media type for which the styles will be applied. Most commonly used is screenmedia-feature: media features, such as width, height, orientation, etc.
Example:
- In this example, the page background will become light blue if the screen width does not exceed 768 pixels.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Types of Media Queries
1. Width and Height Queries
These media queries allow you to change styles depending on the width and height of the viewport.
Examples:
/* Apply styles if the screen width is less than or equal to 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Apply styles if the screen height is greater than 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientation
Orientation queries allow you to adapt styles depending on whether the device is in portrait or landscape mode.
Examples:
/* Apply styles for portrait orientation */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Apply styles for landscape orientation */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Pixel Density (resolution)
Media queries for pixel density allow you to adapt styles for devices with different pixel densities, such as Retina displays.
Examples:
/* Apply styles for screens with a pixel density of 2x and higher */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Apply styles for screens with a pixel density of less than 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Combining Media Queries
Media queries can be combined using logical operators and, not, and only.
Examples
Using the and operator:
/* Apply styles for devices with a screen width between 600px and 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Using the not operator:
/* Apply styles for all devices except those with screen width less than 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Using the only operator:
/* Apply styles only for screens */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION