适合响应式网站的 rem 解决方案

通过响应式设计稿尺寸不一的情况下，通过 resize事件 时判断窗口选用对应客户端的 设计稿宽度 运算，辅以 @media响应式 即可完美复现响应式的设计啦。

计算基准值

将js代码放在 <head> 内，且不依赖任何插件以保证他最早被执行。

javascript

复制成功

  (function () {
    function recal() {
      let docElement = document.documentElement || document.body;
      
      // #region 可根据响应式需求自由调整逻辑
      let clientWidth = docElement.clientWidth,
        designWidth = 1200; //PC端设计稿宽度（主内容区域）

      if (clientWidth < 750) { // 客户端屏幕宽度小于一定尺寸时
        designWidth = 640; //转为移动端设计稿宽度
      } else if (clientWidth < designWidth) {// 客户端屏幕宽度小于 PC端设计稿宽度 但未需转换成 移动端设计 时
        clientWidth -= 80 
        // 解决在750~1200左右单独设计的情况，让内容主体的展示有一定的留白
      } else { //否则直接应用PC端设计稿宽度
        clientWidth = designWidth;
      }
      // #region 
      docElement.style.fontSize = (clientWidth / designWidth) * 100 + "px";
    }
    window.addEventListener("resize", recal);
    recal();
  })();

封装ptr函数

css预处理器编写函数(我这边用的是stylus)

stylus

复制成功


ptr(px){
  return unit((px / 100), 'rem');
}

body{
  font-size: ptr(12)
}

@media screen and (max-width: 1200px){
  .container{
    width: ptr(1200);
  }
}

@media screen and (max-width: 750px){
  .container{
    width: ptr(750);
  }
}