1 and rem
rem is set relative to the size of the root element. The root element in the web page refers to It is html. We can control the size of rem by setting the font size of html. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
font-size:20px; }
p{
width: 600px;
overflow: hidden;
line-height: 1;
font-size: 1rem; }
</style></head> <body>
<p> 是啊啊啊
</p></body></html> When you set font-size:20px; in the html root element, 1rem = 20px; similarly, if you set 10px, then 1 rem = 10px; rem can not only be used for font size, It can also be used for length units such as width. At this time you may ask, how to achieve responsiveness like this? Therefore, we need to combine @media to set the size of the html root element, so that all corresponding rem units in the page will follow the root element, for example: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
If you don't When setting the font size of HTML, 16px will be used as the base. The advantage of this over px is obvious. You don't need to apply @media to each element. You only need to set different sizes for the html root element. The compatibility is also very good.
2. vw, vh
Although the rem unit is still very simple, it is still not simple and crude enough. There is another simpler unit, which is the vw and vh unit.
Relative to the width of the viewport. The viewport is divided into 100 units of vw. For example, 1vw is equivalent to 1% of the screen width. Go directly to the example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
width: 20vh;
height: 30vw;
line-height: 1;
font-size: 1vw;
background: #FC8B53;
color: #fff;
}
</style>
</head>
<body>
<p>
是啊啊啊
</p>
</body>
</html> After setting it like this, the width of p changes with the change of the screen height, its height changes with the change of the screen width, and the font size also changes with the screen. I did this to more intuitively express the flexibility of the vw unit. No more writing a bunch of messy @media stuff. What kind of flexible method? For example, if you set the width of a p to 50% of the screen, then the width is 50vw. At this time, you need to set its height to 50% of its width. What if you don't use vw? You can only use js to calculate. But when using vw, just set it to 25vw and it will be fine.
However, there are some compatibility issues. There is no problem with ios. The built-in browser of Android phone requires Android system 4.4 or above. Other browsers are OK, only the built-in browser has problems. But who still uses Android’s built-in browser to play with it now? It can’t be found anywhere. So, just use vw and vh.