What are media queries in CSS3

清浅
Release: 2018-11-28 09:36:25
Original
3092 people have browsed it

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) { ... }
Copy after login


Example:

<style>

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

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

What are media queries in CSS3

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template