Detailed introduction of CSS3 media queries for responsive layout
Use our CSS3 to achieve Responsive layout
Just having a flexible box is not enough
CSS3 also extends the mediaattribute, adding A module function
Media QueriesMedia QueriesFunction
Introduction of media queries
With the rapid popularity of mobile terminals
More and more users use smart phones , tablets, etc.
All taking into account the needs of users
We need to ensure that users have a good experience browsing the page on various devices
So we need media queries
It allows us to provide Different devices or devices with different conditions set different styles
However, if the mobile terminal has very important needs
It is better to develop a special page for the mobile terminal
Let’s take a look at introducing media queries Method
Media query selectively loads files
First let’s take a look at the link method
This is the approach in CSS2
Use the link tag and media attribute to introduce different style sheets ( If the conditions are met)
<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />
Two concepts are introduced here
One is Media Type(Media Type), and the screen
here isMedia Features (Media Query), the max-width here: 600px
Media Query is an enhanced version of CSS3’s Media Type
In fact, Media Query can be regarded as Media Type (judgment condition) + CSS (qualified Style rules)
The translation of this code is
If the media medium is a screen type and the window width is ≤600px, introduce the demo.css style file
Media query to selectively add styles
What we do in CSS3 is to use @media rules to add different styles in CSS files
Compared with link, it can reduce page requests and have better results
@media screen and (max-width: 600px) { .demo1 { ......
}
.demo2 {
......
}
}Introduction of other media queries
There are many, many media queries, we don’t need to know so much
The only two commonly used ones are the above two
@import can also use media queries
@import url(demo.css) screen;
Use media queries
If we want to specify multiple media properties
Just use the and keyword directly
The specification of the media properties part requires the use of brackets
media="screen and (min-width: 601px) and (max-width: 800px)"
The style is applied to the screen between 601px~800px
Media queries do not have or specify alternative media capabilities, but we can use a comma separated list
media="screen and (min-width: 601px), print and (min-width: 6in)"
Styles are applied on screens 601px+ or printing devices that use paper at least 6 inches wide
Media queries can specify negative conditions
We need to use the keyword not at the front of the media statement
Note that it cannot be declared separately before a single condition, not will negate the entire media statement
media="not screen and (min-width: 600px) and (max-width: 800px)"
Style is applied to screens that are not between 600px~800px
In addition to the not keyword, there is also an only
It is used to hide media queries from early browsers
Similar to not, it must be declared at the beginning of the media declaration statement
For example, this statement
media="screen and (min-width: 601px) and (max-width: 800px)"
Early browsers can only understand it asmedia="screen"
Since it does not understand media properties, it will apply style rules to all screen devices
but uses the only keyword
media="only screen and (min-width: 601px) and (max-width: 800px)"
Early browsers will understand this as media="only "
But the only media type does not exist, so it will not apply any styles
Implements the function of hiding media queries from early browsers
Media types and media properties
Media Type
Although there are many keywords for media types, most of them have been abandoned (who uses them)
The commonly used ones are all, screen, and then print
| Media Type | Description |
|---|---|
| All Media equipment | |
| Color screen: computer, tablet, smartphone... | |
| Printer, Print Preview | |
| Occurring device: screen reader.. | |
| (Deprecated) Speech and | AudioSynthesizer |
| (Deprecated) Braille Tactile Feedback Device for the Blind | |
| (obsolete) | Page Braille printer for the blind |
| (Obsolete) Portable device: small phone.. | |
| (Obsolete) Projection device: slideshow.. | |
| (Deprecated) Media using a fixed-density letter grid: teletypewriters and terminals.. | |
| (obsolete) TV type equipment: TV, Internet TV.. |
| Media type | Description |
|---|---|
| aspect-ratio | The ratio of the width to height of the visible area of the page in the output device |
| color | The number of color originals in each group of output devices. If it is not a color device, the value is equal to 0 |
| color-index | The number of entries in the output device's color lookup table. If no color lookup table is used, the value is equal to 0 |
| device-aspect-ratio | The ratio of the visible width of the screen to the height of the output device |
| device-height | The screen visible height of the output device |
| device-width | Output device The visible width of the screen |
| grid | Query whether the output device uses raster or lattice |
| height | The height of the visible area of the page in the output device |
| max-aspect-ratio | The maximum ratio of the visible width and height of the screen of the output device |
| max-color | The maximum number of color originals in each group of the output device |
| max-color-index | Output The maximum number of entries in the device's color lookup table |
| max-device-aspect-ratio | The maximum ratio of the screen visible width to height of the output device |
| max-device-height | The maximum height visible on the screen of the output device |
| max-device-width | The maximum visible width of the screen of the output device |
| max-height | The maximum visible area height of the page in the output device |
| max-monochrome | The maximum number of monochrome originals contained per pixel in a monochrome frame buffer |
| max-resolution | Maximum device resolution |
| max-width | Maximum visible area width of the page in the output device |
| min-aspect-ratio | Minimum ratio of width to height of the visible area of the page in the output device |
| min-color | The minimum number of color originals in each group of the output device |
| min-color-index | The minimum entry in the color lookup table of the output device Number |
| min-device-aspect-ratio | The minimum ratio of the visible width to height of the output device screen |
| The minimum visible width of the screen of the output device | |
| The minimum visible height of the screen of the output device | |
| min-height | The minimum visible area height of the page in the output device|
| The minimum number of monochrome originals contained per pixel in a monochrome frame buffer | |
| The minimum resolution of the device | |
| The minimum visible area width of the page in the output device | |
| In a single color The number of monochrome originals per pixel in the frame buffer. If it is not a monochrome device, the value is equal to 0 | |
| Whether the height of the visible area of the page in the output device is greater than or equal to the width | |
| The resolution of the device. Such as: 96dpi, | 300dpi, 118dpcm |
| Scanning process of TV equipment | |
| The width of the visible area of the page in the output device |
Note here to distinguish device-width/height and width/height
device -width/height is the width of the device (not the width of the browser)
width/height is the size of our browser window
Use
documentElement.clientWidth/clientHeight is viewport The value of
The above is the detailed content of Detailed introduction of CSS3 media queries for responsive layout. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1662
14
1419
52
1313
25
1262
29
1236
24
How to create a responsive blog list layout using HTML and CSS
Oct 21, 2023 am 10:00 AM
How to Create a Responsive Blog List Layout Using HTML and CSS In today’s digital age, blogs have become an important platform for people to share their opinions and experiences. And in order to attract more readers, a beautiful and responsive blog list layout is crucial. In this article, we will learn how to create a simple yet functional responsive blog list layout using HTML and CSS. First, we need to prepare some basic HTML code. The following is the HTML structure of a simple blog list layout: <
Unit Selection Guide for Responsive Layout Design
Jan 27, 2024 am 08:26 AM
With the popularity of mobile devices and the development of technology, responsive layout has become one of the essential skills for designers. Responsive layout is designed to provide the best user experience for screens of different sizes, allowing web pages to automatically adjust their layout on different devices to ensure the readability and usability of content. Choosing the right units is one of the key steps in responsive layout design. This article will introduce some commonly used units and provide suggestions for selecting units. Pixel (px): Pixel is the smallest unit on the screen. It is an absolute unit and does not automatically change as the screen size changes.
How to create a responsive blog layout using HTML and CSS
Oct 21, 2023 am 10:54 AM
How to Create a Responsive Blog Layout Using HTML and CSS In today’s Internet age, blogs have become an important platform for people to share knowledge, experiences, and stories. Designing an attractive and responsive blog will allow your content to display better on different sizes and devices, improving user experience. This article will introduce how to use HTML and CSS to create a responsive blog layout, while providing specific code examples. 1. HTML structure First, we need to build the basic HTML structure of the blog. The following is a
Explore the best responsive layout frameworks: the competition is fierce!
Feb 19, 2024 pm 05:19 PM
Responsive layout framework competition: who is the best choice? With the popularity and diversification of mobile devices, responsive layout of web pages has become more and more important. In order to cater to the different devices and screen sizes of users, it is essential to adopt a responsive layout framework when designing and developing web pages. However, with so many framework options out there, we can’t help but ask: which one is the best choice? The following will be a comparative evaluation of three popular responsive layout frameworks, namely Bootstrap, Foundation and Tailwind.
CSS layout tutorial: The best way to implement a two-column responsive layout
Oct 18, 2023 am 11:04 AM
CSS Layout Tutorial: The Best Way to Implement Two-Column Responsive Layout Introduction: In web design, responsive layout is a very important technology that allows web pages to automatically adjust their layout according to the screen size and resolution of the user's device, providing Better user experience. In this tutorial, we'll show you how to use CSS to implement a simple two-column responsive layout, and provide specific code examples. 1. HTML structure: First, we need to create a basic HTML structure, as shown below: <!DOCTYPEht
Implementation method of HTML's responsive layout design guide
Jan 27, 2024 am 08:26 AM
How to use HTML to implement responsive layout design. With the popularity of mobile devices and the rapid development of the Internet, responsive layout has become an essential skill for designers. Responsive layout allows the website to automatically adapt to different screen sizes and resolutions on different devices, allowing users to have a better browsing experience. This article will introduce how to use HTML to implement responsive layout design and provide specific code examples. Using @media query @media query is a feature in CSS3 that can be applied based on different media conditions
Practical tips for using HTML fixed positioning in responsive layouts
Jan 20, 2024 am 09:55 AM
Application skills of HTML fixed positioning in responsive layout, specific code examples are required. With the popularity of mobile devices and the increase in user demand for responsive layout, developers have encountered more challenges in web design. One of the key issues is how to implement fixed positioning to ensure that elements can be fixed at specific locations on the page under different screen sizes. This article will introduce the application skills of HTML fixed positioning in responsive layout and provide specific code examples. Fixed positioning in HTML is through the position attribute of CSS
How to create a responsive photo album display layout using HTML and CSS
Oct 19, 2023 am 08:51 AM
How to use HTML and CSS to create a responsive photo album display layout. The photo album display layout is a common page layout type in websites and can be used to display pictures, photos, images and other content. In today's environment where mobile devices are popular, a good photo album display layout needs to have a responsive design that can adapt to different screen sizes and have good display effects on different devices. This article will introduce how to use HTML and CSS to create a responsive photo album display layout, and provide specific code examples. I hope readers can pass the instructions
