<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
*{
margin:0;
padding:0
}
html,body{
height:100%;
}
body{
display:flex;
flex-direction: column;
}
html{
font-size:31.25vw;
/*1rem == 100px*/
}
header{
height:0.44rem;
background:green;
font-size:12px;
}
nav{
height:0.35rem;
background:orange;
}
main{flex:1;}
footer{
height:0.44rem;
background:blue;
}
@media all and (min-width:321px) and (max-width:375px){
header{
font-size:16px;
}
footer{}
}
</style>
</head>
<body>
<header>文本</header>
<nav></nav>
<main></main>
<footer></footer>
</body>
</html>
<!--
100px == ?vw
设计图！！！！！
640px 750px 1080px
dpr: 2 2 3
例子1：如果设计图为640px;
考虑dpr 2
640px / 2 == 320px;
320px == 100vw;
3.2px == 1vw;
100px == 31.25vw;
具体实现：量出height:88px dpr 2 88px / 2 == 44px
44px / 100 == 0.44rem;
死记住！！： 如果设计图为640px
给html设置{font-size:31.25vw}
量出大小 76px 76 / dpr == 38px;
38px / 100 == 0.38rem;
例子：设计图为750px;
需求：100px == ?vw;
dpr 2
750px / 2 == 375px
100vw == 375px;
1vw == 3.75px;;
26.67vw == 100px;
死记住！！！ 如果设计图为750px
给html设置{font-size:26.67vw}
量出大小54px 54px / 2 == 27px;
27px / 100 == 0.27rem
-->
VW的相关教程结束。
