html----rem结合vw布局

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 = 1rem

如果设计图的宽度是750px  则 dpr =2所以：逻辑像素 = 750px /2= 375px

所以：375px = 100vw

所以：1vw =3.75px

所以：26.67vw = 100px = 1rem

如果设计图的宽度是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.计算方法：

为了方便计算：1rem = 100px,,所以，要除以100

已知 dpr = 2

如果量取设计图的某部分 宽度  300px

物理像素-------逻辑像素-------rem

则：300/2/100 = 1.5rem

7. rem是相对于根元素的字体大小的单位，能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小

如果设计图为 640px

根元素font-size=31.25vw 相当于100px,相当于 1rem

如果设计图为750px

根元素font-size=26.67vw 相当于100px,相当于 1rem

一般，我们要在公共样式中根据设计图的大小，设置根元素字体的大小，单位为vm，

如果设计图为640px,html{font-size:31.25vw}

如果设计图为750px，html{font-size:26.67vw}

然后，我们量取得px/2/100即：物理像素/2/100

rem是指根元素(root element html) 的字体大小 ，根元素默认的字体大小为16px。

rem是通过根元素进行适配的，网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小；

所以默认我们认为1rem=16px； 2rem=32px。

如果为了方便计算我们一般设置1rem=100px ，我们需要设置字体大小为100px

所以我们一般在js中做判断；：

如果是750的设计稿，但是手机是375的屏幕

对应的750设计稿 视觉测量值100px -->1rem

375的设计稿 页面显示的就是50px -->1rem

所以1rem和px的关系就是50倍的关系了： 屏幕/7.5 = 375/7.5=50px

这样1rem*50=50px(50px是375屏幕上面的长度，相当于750上的100px)

==========================================================

如果是375的设计稿，手机屏幕也是375px的

对应375的设计稿 视觉稿测量值为100px --->1rem

375 屏幕手机页面显示为100px -->1rem

所以1rem*100 = 100px (100px是375屏幕上的长度，相当于350上的100px)

===========================================================

综上所述，对于750的设计稿，375的手机和设计稿是50%的关系所以设计稿上100px

对应375手机上的50px；也就是1rem对应着50px。

document.documentElement.style.fontSize = (a/7.5) * 1 + "px"。

对于375的设计稿，375设计稿和手机的100%的关系，所以设计稿上100px，对应这375手机上的50px,也就是50px；

document.documentElement.style.fontSize =(a/7.5) * 2 + 'px'。

---