Mobile debugging, layout, and common problem resolution

 REM Principle and Introduction: depending on the size of the HTML root element, PX to rem dynamically adjust the root element font-Size: 1rem=16px; The font size of HTML is the font size that can be default to the browser, mobile adaptation: Way One media query @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; }}.................... Finish writing the screen size of the main model;----------------------------------------------------------------------------------------------mode two use JS to set the font-Size;let DOCW= Document.documentElement.clientWidth | | Document.body.clientWidth;//window WidthLet doch = document.getElementsByTagName ("html") [0]; DocH.style.fontSize= DOCW/10 + "px";Window.addeventlistener ("Resize", (e) = ={Let DOCW= Document.documentElement.clientWidth | | Document.body.clientWidth;//window WidthDocH.style.fontSize = DOCW/10 + "px";})sass function with REM;functionPx2rem ($px) {$rem:37.5   @return($PX/$rem) +REM;} Call: Width:px2rem (100px); Remove the mobile side layout appears horizontal scroll bar box-sizing:border-box;

Vue uses SASS syntax to install:sass, Sass-loader, Node-sass-   D in the development environment;Webpack (configIn the/index.js fileProductionsourcemap change to False,This way the files can be packaged without the. Map end of the JS file, and the file volume is reduced by at least half)/ * on index.html to determine whether to open the PC or the mobile side * *<link rel= "shortcut icon" href= "./static/img/favicon.png" >//page Title Corner logo picture<div id= "App" ></div> <div id= "IsMobile" > <p> on the mobile side Open, and refresh the page. </p> </div><script>Browserredirect ();functionBrowserredirect () {varSuseragent =navigator.userAgent.toLowerCase (); varBisipad = Suseragent.match (/ipad/i) = = "ipad"; varBisiphoneos = Suseragent.match (/iphone os/i) = = "iphone OS"; varBISMIDP = Suseragent.match (/midp/i) = = "MIDP"; varBIsUc7 = Suseragent.match (/rv:1.2.3.4/i) = = "rv:1.2.3.4"; varBISUC = Suseragent.match (/ucweb/i) = = "UCWeb"; varBisandroid = Suseragent.match (/android/i) = = "Android"; varBisce = Suseragent.match (/windows ce/i) = = "Windows CE"; varBISWM = 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 (analog background data) Vue-touch (gesture judgment)//Mobile-side debug tool, output log on mobileImport vconsole from ' Vconsole '//console.log (' Hello world ')Eruda Mobile debugging artifact;cnpm install Eruda -- Saveeruda.init () to determine whether iOS or Android devices;varU =navigator.useragent;varisandroid = U.indexof (' Android ') >-1 | | U.indexof (' Adr ') >-1//Android TerminalvarIsios =!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/);//iOS terminal

Mobile debugging, layout, and common problem resolution