How to use @ media screen to realize self-adaptation of web page layout
This article shows you how to use @ media screen to achieve adaptive page layout, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article, I hope you can get something.
1. Set the Meta label
Before you do that, you must add the following line of code to the header area of the page:
(the user-scalable = no attribute solves the problem that the iPad cannot return to the specific size until it is touched after switching the landscape screen. ) 2. Set the style Media Queries through media query
Media Queries is the core of responsive design.
Resolution above 1280 (greater than 1200px)
@ media screen and (min-width:1200px) {
}
1100 resolution (greater than 960px, less than 1199px)
@ media screen and (min-width: 960px) and (max-width: 1199px) {
}
880resolution (greater than 768px, less than 959px)
@ media screen and (min-width: 768px) and (max-width: 959px) {
}
720 resolution (greater than 480px, less than 767px)
@ media only screen and (min-width: 480px) and (max-width: 767px) {
}
Resolution below 440 (less than 479px)
@ media only screen and (max-width: 479px) {
}
Example
Turn blue when less than 300
@ media only screen and (max-width: 300px) {
P {
Background-color: blue
}}
Effect screenshot
More than 300 and less than 800 is red.
@ media screen and (min-width: 300px) and (max-width: 800px) {
P {
Background-color: red
}
}
Effect screenshot
Blue when greater than 800
@ media screen and (min-width: 800px) {
P {
Background-color: pink
}
}
Effect screenshot
According to the specific size of the device screen, add the corresponding css code under its specific width.
The above content is how to use @ media screen to achieve self-adaptation of web layout, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.
