23-移动端布局方式-VM

移动端布局方式-VM

一、单位

vm(vh,vamx,vmin)

1. vw单位的解释：viewport width 视口的宽度（优点类似于%单位）
2. 简单换算关系：1vm等于视口宽度的百分之一，100vm=视口的百分百
3. 思考：100vm === 100%?
   • 在没有滚动条的前提下，成立
   • 由于滚动条也是占位置的，不成立（100%会少一点点）

关于vm单位的推算

1. 100vm就是等于浏览器全部，设计图宽度也是一样的
2. 100vm跟设计图的宽度一样，1vm就是设计图的百分之一
3. 100vm/设计图的大小 = 每一份大小
4. 量出设计图中每一个区域的大小可以带入计算

二、结合移动端的公式进行推算:dpr=物理像素/逻辑像素

第一种情况：当设计图的大小是640px的时候

1. 640px/2=320px
2. 320px=100vw
3. 1vw=3.2px
4. 1px=0.3125vw
5. 既然在640px的设计图中每一份px占据了0.3125vw
   • 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.3125 = A vw
   • 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.3125 = B vw
6. 这种方式可以适配大部分终端,但是缺点是每次都需要计算0.3125很麻烦
7. 既然每次都要计算,那么可以考虑自动计算,如何自动计算呢?
8. 把量出来的值除以dpr后直接把这个值单位换成rem即可
   • 44px => 44rem
   • 50px => 50rem
9. 在设计图为640px的情况下,直接把根元素html{font-size:0.3125vw;}

第二种情况：当设计图宽度是750px的时候【重点】

1. 750px/2=375px
2. 100vw=375px
3. 1vw=3.75px
4. 1px=0.2667vw
5. 既然在750px的设计图中每一份px占据了0.2667vw
   • 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.2667 = A vw
   • 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.2667 = B vw
6. 在设计图宽度是750px的时候,直接把根元素html{font-size:0.2667vw}

三：关于vw单位适配移动端的总结

1. 当设计图宽度为640px的时候,html{font-size:0.3125vw}
2. 当设计图宽度为750px的时候,html{font-size:0.2667vw}
3. 计算公式
   • 第一步：需要根据dpr=物理像素/逻辑像素
   • 第二步：就直接把逻辑像素的单位设置为？rem即可

注意点：

• vw适配方法和媒体查询没有关系
• vw视口单位，不仅可以用于移动端布局也可以用于pc端布局