标签：bsp 字体 比例 col 物理 设备 div 计算 nbsp
1.rem
rem是相对于根元素的字体大小的单位
rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小
2.dpr设备像素比
dpr = 物理像素 / 逻辑像素
物理像素：设计图量出的px（设备显示的px）
逻辑像素：css中设置的px
如果设计图的宽度是640px 或者 750px dpr = 2
如果设计图的宽度是1080px dpr = 3
3.vw
视窗宽度
1vw 等于视窗宽度的1%
100vw 等于视窗宽度的100%
4.vw 与 px 之间的换算
如果设计图的宽度是640px 则 dpr = 2
所以：逻辑像素 = 640px /2 = 320px
所以：320px = 100vw
所以：1vw = 3.2px
所以：31.25vw = 100px
如果设计图的宽度是750px 则 dpr = 2 所以：逻辑像素 = 750px /2 = 375px 所以：375px = 100vw 所以：1vw = 3.75px 所以：26.67vw = 100px
如果设计图的宽度是1080px 则 dpr = 3 所以：逻辑像素 = 1080px / 3 = 360px 所以：360px = 100vw 所以：1vw = 3.6px 所以：27.78vw = 100px
5.根元素字体大小的限制
如果设计图宽度为640px
则：根元素设置为
html{font-size:31.25vw}
如果设计图宽度为750px
则：根元素字体大小设置为
htmt：{font-size:26.67vw}
如果设计图宽度为1080px
则根元素字体大小设置为
html:{font-size:27.78vw}
6.计算方法：
已知 dpr = 2
如果量取设计图的某部分 宽度 300px
则：300/2/100 = 1.5rem
标签：bsp 字体 比例 col 物理 设备 div 计算 nbsp
原文地址：https://www.cnblogs.com/SRH151219/p/10407609.html
