How to use css @media attribute

css @media attribute definition and usage

Using @media query, you can define different styles for different media types.

@media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful.

When you reset the browser size, the page will also be re-rendered based on the width and height of the browser.

Example

If the document width is less than 300 pixels, modify the background color (background-color)

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

Syntax

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

You can also use different stylesheets for different media

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

Media type

The above is the detailed content of How to use css @media attribute. For more information, please follow other related articles on the PHP Chinese website!