rem自适应

rem自适应

比如 设计稿宽高是1920 *1080，那么 设计图中各个元素在此分辨率下肯定能展示正常。

1、宽 以实际屏幕的整个宽度为标准，高度按原稿的比例来适配此宽度。

  document.documentElement.style.fontSize =  1080/10.80+ 'px';  //原稿1rem的值100px，项目中以此去计算
  const sw = window.innerWidth-15;//满宽度--提前减去纵向的滑动条宽度;   
  const sh = sw*1080/1920;  //以高度适配
  document.documentElement.style.fontSize = sh / 10.80+ 'px';   //修改1rem的px值，实现等比缩放

那么此时可能出现宽度满屏，但是设计稿中的一屏幕的类容纵向上在此处展示的不是全面的。

2 高 以实际屏幕的高度为标准，宽度按原稿的比例来适配此高度。

  document.documentElement.style.fontSize =  1920/19.20+ 'px';  //原稿1rem的值100px，项目中以此去计算
  const sh = window.innerHigth;   //实际展示时满高度，
  const sw = sh*1920/1080;  //以宽度适配
  document.documentElement.style.fontSize = sw / 19.20+ 'px';   //修改1rem的px值，实现等比缩放

那么此时可能出现纵向上是原稿一屏幕的内容，但是宽度上可能就有多余的空间留出来了。

宽度空余不居中，可以通过在body中加上 margin:0 auto 实现自动居中。

以上都是1rem= 100px，就不用去费心计算了，比如一个元素 with是275px ，那么就是2.75rem
。
同样可用于手机页面自适应。有的可能要加上对dpr的处理使显示更好，这个可以参考其他的dpr处理方法。