移动端布局

*网页中常用的单位有哪些*

- px 像素

- em 相对单位

- pt 磅 硬件设备

- % 宽高自适应

- deg

移动端重要的单位: rem 相对于根元素html的font-size的大小进行计算的

移动端布局的思路

- 每一个移动端的尺寸大小都是不一样的 html的宽高大小也是不一样的

- 由于px是一个固定的单位 所以在每一个移动上显示的大小是固定

- 让盒子应该跟随移动端的大小进行缩放

- 考虑将px转换为rem单位 因为是rem是相对于根元素进行计算的

怎么去转换？

计算公式

- 设备像素比 = 物理像素 / 逻辑像素

解释

- 设备像素比: 设计图和测试机的比例 (常见的设计图比例是640px和750px)

- 物理像素: ui给到的设计图

- 逻辑像素: css样式

常见的dpr?

- 设计图宽度是640px的 dpr为2

- 设计图宽度是750px的 dpr为2 - 大部分都是750px

- 设计图宽度是1080px dpr考虑为3

逻辑像素 = 物理像素 / dpr

例子:导航高度为88px(设计图的宽度) 88px/2 = 44px

能不能把px单位转换为rem单位 html的font-size可以利用媒体查询去换

总结：移动端的计算方式

设计图的宽度是640px的时候（dpr为2）物理元素/2/根元素的大小=？rem

设计图的宽度是750px的时候（dpr为2）物理像素/2/根元素的大小=？rem

第一种方式总结

计算公式：dpr=物理元素/逻辑元素

带入公式：逻辑像素=物理元素/dpr/相应的媒体查询 font-size的值

优点：

计算麻烦 有小数 有误差

媒体查询 有多少个设备终端你就需要多少个媒体查询

第二种方法总结

新的单位:vw 视口的宽度

- 1vw等于视口宽度的百分之一

- 100vw = 100%的浏览器宽度？

- 在移动端中 滚动条不占位置 100vw相等100%(只能在移动端使用)

- 在pc端中 滚动条占位置的 100vw不相等100%

推算思路

- 100vw等于移动端浏览器中的百分百宽度 100vw = 100% width

- 100vw中的一份 等于设计图的百分之一

- dpr = 物理像素/逻辑像素

1.常见的设计图宽度为640px

- 640px / 2 = 320px(逻辑像素)

- 320px = 100vw

- 1vw = 3.2px

- 1px = 0.3125vw => 88px/2 = 44px

2.常见的设计图宽度为750px

- 750px / 2 = 375px

- 375px = 100vw

- 1vw = 3.75px

- 1px = 0.2667vw

计算方法：

当设计图宽度是640px的时候 html{font-size：31.25vw}

当设计图宽度为750的时候 html{font-size：26.67vw}

计算：物理/2/100=逻辑像素= ？rem

计算公式：88px/2=44rem