移动端布局
作者：互联网
*网页中常用的单位有哪些*
- 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
标签：dpr,布局,设计图,像素,宽度,rem,移动,100vw 来源： https://www.cnblogs.com/xsc1234/p/15196424.html