ヤッハロー, Kaiqisanすうう,一つふつうの学生プログラマである. With the further development of science and technology, batches of new electronic products continue to emerge, and the main carrier for people to browse the web has changed from computers to all kinds of A smart phone or tablet, so, there is a direct demand for designing pages now that your page can adapt to the size of various mobile phones, and can be adjusted for different sizes, which can be very good in different size screens. Have to display the content of your own web page. This is responsive design.
This knowledge point seems difficult, but in fact it is very simple to operate. You only need to do the following preparations to achieve responsiveness.
PS : The following knowledge points are more for cross-device page display, (computer -> mobile phone)
The first step, basic configuration
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The basic configuration of some devices is declared here. It is declared that the width of the display window ( width) is the width of the client's screen ( device-width), and then the following initial-scale, indicating that the initial ratio of the displayed text and graphics is 1.0 times.
In addition, it has properties
-
height: Same as the width above, specify the height of the window, the value can be a number or device-height -
minimum-scale：Minimum zoom ratio -
maximum-scale: Maximum zoom ratio -
user-scalable: There are two attribute valuesyesno( no need to add quotation marks ), specifying whether the zoom ratio can be modified -
target-densitydpi: Specifies the number of pixels per inch. Android supports three screen pixel densities: low pixel density, medium pixel density, and high pixel density. A low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. Therefore, target-densitydpi has the following attribute values ------ low-dpi-medium pixel density and high pixel density devices zoom in accordingly,
- medium-dpi-high-pixel-density devices scale up accordingly, and pixel-density devices scale down accordingly. This is also the default configuration of the browser.
- high-dpi-medium pixel density and low pixel density devices are scaled down accordingly.
- device-dpi-Use the original dpi of the device as the target dp. No default zoom
- Specify a value by yourself, which represents the number of pixels in an inch, but this value must be between 70-400
PS: The above configuration is for mobile web pages of different sizes, not for computer screens of different sizes!
The second step is to start writing responsive
You guessed it right, the second step starts, and the response is still very simple.
Write a simple example first
<body>
<div class="demo">页面内容-01</div>
</body>
body {
background-color: lightpink;
}
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
Now, open the browser, it looks like this
Then, we add responsive content to the css code
body {
background-color: lightpink; /* 浅粉色 */
}
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
@media screen and (max-width: 1000px) {
body {
background-color: #80aa86; /* 淡绀色 */
}
}
The newly added code means that the following css style is used when the screen width is not greater than 1000px, (actually, this responsive code is placed below, and it starts to work when the width is less than 1000. At this time, the body gets two copies of the background The color style, but only the bottom style is used, so this will replace the above content, which means that if the responsive code is placed on the body, the responsive style will not play any role)
To solve this problem, you can write like this
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
@media screen and (max-width: 1000px) {
body {
background-color: #80aa86; /* 淡绀色 */
}
}
@media screen and (min-width: 1000px) {
body {
background-color: lightpink; /* 浅粉色 */
}
}
This allows seamless switching!
The following is the display effect
Here, there must be a small partner to ask, hey! I can understand the minimum width and maximum width at the back, but what about the front screen?
In fact, it is like this. When I first started learning, I didn’t care about it. Until I clicked on the option to print webpage, I found that all the css styles in the webpage to be printed disappeared. This is because we did not specify the device to be printed. The style of the webpage just specifies the style in the display device.
As shown in the figure, the style in the page is not used in the printer device, so you need to add
@media print {
.demo {
color: red;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
}
In addition to display screens and printing devices, there are other devices that can be specified.
-
all all devices
-
braille
-
embossed braille printing
-
handheld
-
Project presentations such as slides
-
speech speech
-
tty A grid of fixed letter spacing, such as a teletypewriter
-
tv tv
Although the usefulness may be small, it is essential for user experience and barrier-free design.
Of course, you can also use only to specify a unique device, use and to add juxtaposition conditions, and use not to exclude conditions. (Generally, an @media selects to specify a device, and then uses the and not judgment condition to determine the width and height of the current device to determine whether it is the css style.
@media only print {
/* 只是指定打印机设备 */
.demo {
color: red;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
}
The final effect.
to sum up
----Don’t dislike the troublesome responsiveness, think that as long as the web page is displayed normally on your own display screen, it is enough. The web page is written for everyone to see. If different devices can’t display normally, then make a web page. What's the point?
----The above content is only part of the responsive design, mainly for cross-device adaptation of devices of different nature. There are also responsive designs for different sizes and different window sizes. I hope everyone will consider it when designing web pages, optimize the layout, and strengthen the web's resilience to the maximum! ~