Explore the use of media query CSS code

Media Query is an important feature in CSS3, which allows developers to display different page layouts and styles on different device screens. Media queries can set different CSS properties according to different devices to meet the needs of different screens. In the future of web design and development, media queries will become increasingly important. In this article, we will explore the use of media query CSS code.

The syntax of media query is as follows:

@media (media feature) {
    /*CSS styles*/
}

where @media tells the browser that this is a media query, media feature represents the specific condition to be recognized by the media query, and CSS styles represents the application for this condition. CSS styles.

Here is an example of a media query:

@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

So the above code says that when the width of the device is less than or equal to 600px, use the red background color.

In media queries, we can use many media features. Here are some commonly used media features:

• width: Specify the width of the terminal.
• height: Specify the height of the terminal.
• device-width: Specify the width of the terminal screen.
• device-height: Specify the height of the terminal screen.
• orientation: Specifies whether the device orientation is landscape or portrait.
• aspect-ratio: Specifies the aspect ratio of the terminal screen.
• resolution: Specify the resolution of the terminal screen, etc.

Media query not only supports the judgment of a single condition, but also allows the judgment of multiple conditions, for example:

@media (max-width: 480px) and (orientation: portrait) {
    body {
        background-color: yellow;
    }
}

The above code indicates that when the width of the device is less than or equal to 480px, and the device When the orientation is portrait, use yellow as the background color.

There is also a media query: not query. The not query indicates that except for a certain condition, all other conditions are satisfied. For example:

@media not (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

The above code means that when the width of the device is less than 768px, the font size is 16px.

In actual development, we can also use commas to combine different media queries together, so that different CSS properties can be set for different devices. For example:

@media (min-width: 768px), handheld and (orientation: landscape) {
    body {
        font-size: 20px;
    }
}

The above code means that when the width of the device is greater than or equal to 768px, or the handheld device is used in landscape mode, the font size is 20px.

To summarize, media query is one of the important functions in CSS3. It can set CSS properties for different devices according to the characteristics of the device screen, thereby achieving different layouts and styles. In actual development, we can use many different media features to combine media queries to achieve better results.

The above is the detailed content of Explore the use of media query CSS code. For more information, please follow other related articles on the PHP Chinese website!