rem 响应式网站适配解决方案主要思路通过响应式设计稿尺寸不一的情况下，通过 resize事件时判断窗口选用对应客户

主要思路

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

方案

以需开发 PC端 和 手机端 的响应式项目为例

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

  (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();
  })();

css预处理器编写函数(我这边用的是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);
  }
}

rem 响应式网站适配解决方案

主要思路

方案

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

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

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