美文网首页
rem适配flexible.js解决方案

rem适配flexible.js解决方案

作者: 暴烈的海胆 | 来源:发表于2022-01-13 18:15 被阅读0次

    1某宝方案

    1.1 某宝的flexible.js

    // i6为基准,设计图是i6二倍图,二倍图中32px = 1rem, 我在variables.less 写了变量 @baseFontSize 1rem=37.5px(苹果6下)
    // JavaScript Document
    (function flexible (window, document) {
      var docEl = document.documentElement;     //获取文档根节点并保存到变量docEl中(相当于获取到html对象)
      var dpr = window.devicePixelRatio || 1;   //获取像素比,如果window.devicePixelRatio为false是dpr为1,如果window.devicePixelRatio大于1,那么dpr赋值取大的数
    
      function setBodyFontSize () {
        if (document.body) { //获取到body对象是否存在,个人觉得啰嗦
          document.body.style.fontSize = (12 * dpr) + 'px';
        }  
        else {
          document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))
    
    

    1.2 .less 通过函数方式封装,然后传进去名字和值(重点)

    .rem(@name,@px) {
        @{name}: unit(@px / 75, rem);
     }
    

    2 本人方案

    2.1本人设计的flexible.js方案

    // vue: 在入口页(定义Vue实例的页面)将其引入即可
    function setRem () {
      const baseSize = 16
      const scale = document.documentElement.clientWidth / 375
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    
    // 初始化
    setViewport()
    setRem()
    
    window.onresize = function () {
      setRem()
    }
    
    

    2.2 .less 文件使用

    @baseFontSize: 32;
    
    
    /* 通过函数方式封装,然后传进去名字和值 */
    .rem(@name,@px) {
     @{name}: unit(@px / @baseFontSize, rem);
    }
    
    
    //使用
    .page-item {
     margin: 0 auto;
     .rem(max-width,750);
    }
    

    相关文章

      网友评论

          本文标题:rem适配flexible.js解决方案

          本文链接:https://www.haomeiwen.com/subject/hmoncrtx.html