移动端页面布局-vw

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;

           

        }