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

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

主要思路

通过响应式设计稿尺寸不一的情况下,通过 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);
      }
    }
    复制代码
文章分类
前端