What are media queries in CSS3

This article will share with you an introduction to media queries in CSS3. It has certain reference value and I hope it will be helpful to everyone's learning.

Responsive web design is becoming more and more popular nowadays, but responsive design also brings some problems of its own, such as slow loading. But now there is a way to solve this problem very well. We can use the media query method to solve the problem of adapting the style to different devices. Next, we will introduce it in detail in the article.

【Recommended course: CSS3 Tutorial】

Media Query

Media queries in CSS3 can call different styles according to the size of the user's device. It is a simple and efficient way to serve different content to different devices. The most commonly used queries are those that handle viewport height and width.

Media queries can be used for the following:

(1) Conditionally apply styles using CSS @media and at-rules.

(2) , and other HTML elements for specific media.

(3) In order to test and monitor the media status, use the Window.matchMedia() and JavaScript methods.

Media Type

all: Works on all devices.

print: For paginated materials and documents viewed on screen in print preview mode.

screen: Mainly suitable for screens.

speech: Mainly suitable for speech synthesizers.

Media function

Due to space issues, we only show you some of the media query functions.

Example:

You can use the and keyword to combine media functions with media types or with other media functions, such as limiting the style to landscape devices with a width of at least 30em long

@media (min-width: 30em) and (orientation: landscape) { ... }

Example:

<style>

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

The above example indicates that when the page is smaller than 960px, the page will turn pink

max- width: represents the maximum width. When it is less than this width, the following function will be called

Rendering

Summary: The above is the entire content of this article , I hope this article can give everyone a certain understanding of media inquiries.

The above is the detailed content of What are media queries in CSS3. For more information, please follow other related articles on the PHP Chinese website!