Loading lesson path
Overview
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages.
@media rule is used to add media queries to your style sheet.
Formula
A media query consists of an optional media - type and one or more media - features, which resolve to either true or false.@media [not]
Formula
media - type and(
Formula
media - feature: value) and (
Formula
media - feature: value) {/* CSS rules to apply */
}Formula
The media - type is optional. However, if you use not, you must also specify a media - type.The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules. Meaning of the not and and keywords: not: This optional keyword inverts the meaning of the entire media query. and:
Formula
This keyword combines a media - type and one or more media - features.The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".
Formula
Used for computer screens, tablets, and smart - phonesThe media feature specifies a specific characteristic of the device. Here are some commonly used media features:
Height of the viewport (including scrollbar)
Formula
max - widthWidth of the viewport (including scrollbar) orientation Orientation of the viewport (landscape or portrait) resolution
User's preferred color scheme (light or dark)
Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is 480px, or wider:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is between 480px and 768px:
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}For more examples on media queries, go to the next page: CSS MQ Examples.