文章目录
移动端布局方式-VM
一、单位
vm(vh,vamx,vmin)
- vw单位的解释:viewport width 视口的宽度(优点类似于%单位)
- 简单换算关系:1vm等于视口宽度的百分之一,100vm=视口的百分百
- 思考:100vm === 100%?
- 在没有滚动条的前提下,成立
- 由于滚动条也是占位置的,不成立(100%会少一点点)
关于vm单位的推算
- 100vm就是等于浏览器全部,设计图宽度也是一样的
- 100vm跟设计图的宽度一样,1vm就是设计图的百分之一
- 100vm/设计图的大小 = 每一份大小
- 量出设计图中每一个区域的大小可以带入计算
二、结合移动端的公式进行推算:dpr=物理像素/逻辑像素
第一种情况:当设计图的大小是640px的时候
- 640px/2=320px
- 320px=100vw
- 1vw=3.2px
- 1px=0.3125vw
- 既然在640px的设计图中每一份px占据了0.3125vw
- 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.3125 = A vw
- 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.3125 = B vw
- 这种方式可以适配大部分终端,但是缺点是每次都需要计算0.3125很麻烦
- 既然每次都要计算,那么可以考虑自动计算,如何自动计算呢?
- 把量出来的值除以dpr后直接把这个值单位换成rem即可
- 44px => 44rem
- 50px => 50rem
- 在设计图为640px的情况下,直接把根元素html{font-size:0.3125vw;}
第二种情况:当设计图宽度是750px的时候【重点】
- 750px/2=375px
- 100vw=375px
- 1vw=3.75px
- 1px=0.2667vw
- 既然在750px的设计图中每一份px占据了0.2667vw
- 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.2667 = A vw
- 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.2667 = B vw
- 在设计图宽度是750px的时候,直接把根元素html{font-size:0.2667vw}
三:关于vw单位适配移动端的总结
- 当设计图宽度为640px的时候,html{font-size:0.3125vw}
- 当设计图宽度为750px的时候,html{font-size:0.2667vw}
- 计算公式
- 第一步:需要根据dpr=物理像素/逻辑像素
- 第二步:就直接把逻辑像素的单位设置为?rem即可
注意点:
- vw适配方法和媒体查询没有关系
- vw视口单位,不仅可以用于移动端布局也可以用于pc端布局