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) ,
(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!