最近在做一个专题页时，为了兼容PC版和手机版，专题的宽度是750px，在制作时先按750px的宽度来做CSS布局制作，然后通过设置 html {font-size:100px}，把100px转成1rem的方式来处理，发现在不同的手机分辨度下达不到预定效果。原来上面的设置是在一定的分辨率下设置的，而不同的手机分辨率需要做出计算才行。

解决方法添加js来控制

$(function () {
 function w() {
  var r = document.documentElement;
  var a = r.getBoundingClientRect().width;//获取当前设备的宽度
  if (a > 750 ){//根据设计稿的宽度定
   a = 750;
  }
  rem = a / 7.5;
  r.style.fontSize = rem + "px"
 }
 w();
 //监听横竖屏切换
 window.addEventListener("resize", function() { w() }, false);
});

备注：上面的代码是引用了jquery来处理，如果不引用jquery,直接引用红色的代码即可。相关链接：css在线px转rem