關於移動端適配問題

移動端適配採用rem進行編寫css，整理了三種方案：

方案一：

簡單的js適配

function resizeroot(width)

document.documentelement.style.fontsize=devicewidth/num1+"px";
}resizeroot(750);
window.onresize=function()
拿到750尺寸的設計圖，用px/100即可
方法二：
使用flexible.js實現h5頁面的終端適配  這是阿里開發的一款適配外掛程式
拿到750尺寸的設計圖，用px/75即可
方法三：
使用css檔案進行適配

@media screen and (min-width:300px)}

@media screen and (min-width:320px)}
@media screen and (min-width:340px)}
@media screen and (min-width:360px)}
@media screen and (min-width:375px)}
@media screen and (min-width:380px)}
@media screen and (min-width:400px)}
@media screen and (min-width:414px)}
@media screen and (min-width:420px)}
@media screen and (min-width:440px)}
@media screen and (min-width:460px)}
@media screen and (min-width:480px)}
@media screen and (min-width:500px)}
@media screen and (min-width:520px)}
@media screen and (min-width:540px)}
@media screen and (min-width:560px)}
@media screen and (min-width:580px)}
@media screen and (min-width:600px)}
@media screen and (min-width:620px)}
@media screen and (min-width:640px)}
@media screen and (min-width:660px)}
@media screen and (min-width:680px)}
@media screen and (min-width:700px)}
@media screen and (min-width:720px)}
@media screen and (min-width:740px)}
@media screen and (min-width:760px)}
@media screen and (min-width:780px)}
@media screen and (min-width:800px)}
@media screen and (min-width:1024px)}
@media screen and (min-width:1349px)}

拿到750尺寸的設計圖，找到對應的尺寸（除以2後的）用px/18.75即可

移動端適配問題

移動端web頁面，即常說的h5頁面 手機頁面 webview頁面等。適配問題產生的原因 手機裝置螢幕尺寸不一，做移動端的web頁面，需要考慮在安卓 ios的各種尺寸裝置上的相容，針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。適配的目標 在不同尺寸的手機裝置上，頁面相對...

關於rem適配移動端

function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...

關於移動端適配解釋

關於移動端適配的問題，之前一直是懵的，網上有很多文件，找了幾篇看後發現方式方法有很多，基本不同，但是普遍選擇rem來代替px做單位。這是因為 rem本身沒有繼承性。接下來就對整個過程進行詳解！我們知道，rem是以html的font size大小為基準進行計算的，比如html的font size為10...