网页rem适配

项目中总是遇到rem适配，下面来说下具体是如何计算的

rem：1rem就是基于页面根元素的font-size，如果根元素的font-size: 16px,那么1rem就是16px

为了跟设计稿保持一致，我们通常设置根元素的font-size与设计稿rem单位保持一致

例如，750的设计稿，屏幕宽也是750，那如果给根元素设置font-size:100px，那么1rem = 100px，40px = 0.4rem

但是适配就是为了根据不同屏幕宽度动态设置元素的大小，

• 所以为了方便计算，我们通常设置根元素font-size:100px;
• 设计稿宽为1920，那么1rem就是19.2
• 但是屏幕宽度不确定，我们就要计算根元素相对于设计稿的比例，根据比例放大缩小
• 所以屏幕宽 / x(比例) = 1920  / 100; x = 屏幕宽 / 19.2
• html: {font-size: 屏幕宽 / 19.2}
• 设置后，就可以直接通过rem来写页面，设计稿40px就是0.4rem

demo：

设计稿宽1920，当前屏幕宽1344，设计稿中一个元素为40px

html: {
  font-size: 100vw / 19.2  
}

.box {
  width: .4rem  
}

如上，实际浏览器中计算的box的宽度为 1344 / 19.2 * 0.4 = 28px