pc端自适应&&移动端rem适配代码

第一种

俺写在index.html中的head标签与body标签中间（2560是pc端设计稿的宽度）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<script>   //设置 webview 字体大小不受系统修改而改变   (function () {     if (window.HiSpaceObject) {       window.HiSpaceObject.setTextSizeNormal();     }   })();   //屏幕适应   (function (win, doc) {     if (!win.addEventListener) return;     var html = document.documentElement;       function setFont() {       var html = document.documentElement;       var k = 2560;       html.style.fontSize = (html.clientWidth / k) * 100 + "px";     }       setFont();     setTimeout(function () {       setFont();     }, 300);     doc.addEventListener("DOMContentLoaded", setFont, false);     win.addEventListener("resize", setFont, false);     win.addEventListener("load", setFont, false);   })(window, document); </script>

　　

第二种

在utils文件夹下新建rem.js文件（copy别人的代码，因为我拿到的设计稿是1080的宽度，所以用1080来计算）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

const setFontSize = (minFontSize = 12, maxFontSize = 16) => {   window.onresize = () => {     // 7.5根据设计稿的横向分辨率/100得来     var deviceWidth = document.documentElement.clientWidth;     // 获取浏览器宽度     if (deviceWidth > 750) {       deviceWidth = 10.8 * 50;     } else if (!deviceWidth) {       return;     }     // 此时的fontSize大小为50px(375屏幕的时候)     document.documentElement.style.fontSize = `${deviceWidth / 10.8}px`;       // 禁止双击放大     document.documentElement.addEventListener(       "touchstart",       function (event) {         if (event.touches.length > 1) {           event.preventDefault();         }       },       false     );     var lastTouchEnd = 0;     document.documentElement.addEventListener(       "touchend",       function (event) {         var now = Date.now();         if (now - lastTouchEnd <= 300) {           event.preventDefault();         }         lastTouchEnd = now;       },       false     );   }; }; export default {   setFontSize, };

　　

然后在main.js中引入：

?

1 2 3 4

import Rem from "./utils/rem";     Rem.setFontSize();