移动端调试、布局以及常见的问题解析

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终端