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.

Name	Description
width	Visual width
height	Visual height
aspect-ratio	Viewport aspect ratio aspect ratio
orientation	The direction of the viewport
resolution	The pixel density of the output device
prefers-reduced-transparency	Transparency settings
grid	Whether the device uses a grid or bitmap screen
update	How often the output device modifies the appearance of the content
overflow-block	How the output device handles the edge The content of the block axis overflowing the viewport
overflow-inline	can scroll the content of the viewport overflowing along the inline axis

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!