3D Model Loading

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

2020年11月19日 技术分享>前端技术 , , ,
本站文章除注明转载外,均为原创文章。如需转载请注明出处:
https://www.kwokronny.com/web-rem-resolve/

REM 解决方案

主要思路

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

方案

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    (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)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

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