flexible.js+rem解决pc端和移动端适配

谁借莪１个温暖的怀抱￠ 2022-11-17 11:29 455阅读 0赞

### 第一步：新建 `flexible.js`文件 ###

> 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）

(function flexible(window, document) {
      var docEl = document.documentElement;
      var dpr = window.devicePixelRatio || 1;
    
      // adjust body font size
      function setBodyFontSize() {
        if (document.body) {
          document.body.style.fontSize = 12 * dpr + "px";
        } else {
          document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit() {
        var rem = docEl.clientWidth / 24;
        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);

### 第二步：去vscode下载一个cssrem插件，并修改设置 ###

![20210409143755114.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

## ##

### 第三步在index.vue中引用 ###

![20210409144250365.png][]

引用完就可以使用了

![20210409144144330.png][]

[20210409143755114.png]: /images/20221022/a1ec521bcd934357af2cd83e1ff8ada2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221022/fb689d9cf30049869ed21879e8919676.png
[20210409144250365.png]: /images/20221022/7837d3db74f94c18a0bc743d74d28403.png
[20210409144144330.png]: /images/20221022/0be81721949841ea8a63ec5d20b278f8.png