March 1Mar 1 Administrators CSS Media Queries CSS Media Queries 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. The CSS @media rule is used to add media queries to your style sheet. Media Query Syntax A media query consists of an optional media-type and one or more media-features, which resolve to either true or false. @media [not] media-type and (media-feature: value) and (media-feature: value) { /* CSS rules to apply */} 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: This keyword combines a media-type and one or more media-features. CSS Media Types The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all". Value Description all Used for all media type devices print Used for print preview mode screen Used for computer screens, tablets, and smart-phones CSS Media Features The media feature specifies a specific characteristic of the device. Here are some commonly used media features: Value Description max-height Maximum height of the viewport min-height Minimum height of the viewport height Height of the viewport (including scrollbar) max-width Maximum width of the viewport min-width Minimum width of the viewport width Width of the viewport (including scrollbar) orientation Orientation of the viewport (landscape or portrait) resolution Screen resolution prefers-color-scheme User's preferred color scheme (light or dark) Media Queries Examples 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: Example @media screen and (min-width: 480px) { body { background-color: lightgreen; }} Try it Yourself » 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: Example @media screen and (min-width: 480px) and (max-width: 768px) { body { background-color: lightgreen; }} Try it Yourself » More Media Query Examples For more examples on media queries, go to the next page: CSS MQ Examples. ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.