html—-rem结合vm布局

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