移動端調試、佈局以及常見的問題解析

rem原理與簡介： 依據html根元素大小定，px轉rem動態調整根元素font-size大小； 1rem = 16px; html的字體大小就是能夠默認爲瀏覽器的字體大小； 移動端適配：方式一 媒體查詢@media @media screen and （max-width:320px）{ html{ font-size:20px; } } @media screen and （max-width:360px）and(min-width:321px){ html{ font-size:20px; } } ....................寫完主要機型的屏幕大小； ---------------------------------------------------------------------------------------------- 方式二 採用js去設置font-size； let docW = document.documentElement.clientWidth || document.body.clientWidth;//視窗寬度
let docH = document.getElementsByTagName("html")[0]; docH.style.fontSize = docW/10 + "px";
 window.addEventListener("resize",(e)=>{ let docW = document.documentElement.clientWidth || document.body.clientWidth;//視窗寬度
   docH.style.fontSize = docW/10 + "px";
}) sass函數結合使用rem； @function px2rem($px){ $rem:37.5 @return ($px / $rem)+ rem; } 調用： width:px2rem(100px); 去除移動端佈局出現橫向滾動條box-sizing:border-box;

vue使用sass語法須要安裝:sass、 sass-loader、 node-sass -D在開發環境； webpack(config/index.js文件內的 productionSourceMap改成false,這樣打包出來的文件能夠沒有.map結尾的js文件，且文件體積減小至少一半)
/*在index.html上引入判斷是pc仍是移動端打開*/
<link rel="shortcut icon" href="./static/img/favicon.png"> //網頁title角標圖片
<div id="app"></div>
  <div id="ismobile"><img src="./static/img/github.png" alt="" />
    <p>請在移動端打開，並刷新頁面。</p>
  </div>
<script> browserRedirect(); function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { document.getElementById('ismobile').style.display = "none"; document.getElementById('app').style.display = "block"; } else { document.getElementById('ismobile').style.display = "block"; document.getElementById('app').style.display = "none"; } }; </script>
<style> #ismobile { display: none; font-size: .6rem; text-align: center; padding-top: 4rem; } </style>
mock.js(模擬後臺數據) vue-touch(手勢判斷) //移動端調試工具，在移動端輸出日誌
import vConsole from 'vconsole'
// console.log('Hello world')
Eruda移動端調試神器； cnpm install eruda --save eruda.init() 判斷ios仍是安卓設備； var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端