1.设置理想视口
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.查看设计图大小
设置
750px
html { font-size:26.67vw}
3.设置一整屏页面
html,body{ height:100%}
4.重置文字大小
body{
font-size:0.12rem
display:flex;
flex-direction:column;
}
5. 换单位为rem, 测量大小除以dpr在除以100
header{
width: 100%;
height: 0.44rem;
background: red;
}
main{
width: 100%;
main 不设置高度 ,设置flex:1占满一整屏
flex:1
超出滚动
overflow:auto;
}
footer{
width: 100%;
height: 0.44rem;
background: palegreen;
}