第一步 :html 页面 meta 标签声明
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
第二部 :CSS中将所有元素转换为怪异盒模型:
*{
box-sizing:border-box;
}
第三部 :设置跟的大小 根据设计图通过计算而定 一般750px 的为26.67vw 650px一般为31.25vw 1080px 一般为27.78vw
font-size: =26.67vw;
第四部:一页屏写法前提html,body 高度100%
html body{
height:100%
}
在介绍几个在写页面的小知识
1.通常通过弹性盒布局写法 将body的排列方式转为纵向
2中部通常是能滑动的中部区域设置 flex:1 ; 并且设置overlfow:auto;
3.底部导航通常是定位的 注意在使用定位的时候要注意 一个宽度默认100%的元素在使用定位后宽度会消失 需要手动设置宽度100%