<style type="text/css">
html {
font-size: 100px;/*根元素font-size的大小 也就是1rem的大小*/
}
div {
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;/*根据根元素得,1rem为100px,那0.16rem是16px*/
}
</style>
<style type="text/css">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸,以 iphone5 的宽度(320px)比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
屏幕默认宽是100vw,长是100vh
#container {
background-color: red;
width: 10vw;
height: 10vh;
}