隨著網際網路行業的不斷發展，移動網際網路的比重越來越大，移動端開發適配問題是困擾大多數開發人員的難點，下面就簡單聊聊這個問題：
記得那還是上古時代，在開發pc端網頁的時候，當瀏覽器檢視視窗隨意縮放的時候，我們要求所看到的頁面大小要隨視窗大小伸縮或者隱藏，當時，我們的解決方案就是通過**查詢的方法，獲取檢視視窗的寬度，根據不同的檢視寬度顯示不同的寬度。
@media screen and (max-width: 600px)便於修改，只需修改css檔案
調整螢幕寬度的時候不用重新整理頁面即可響應式展示
**量比較大，維護不方便
為了兼顧大螢幕或高畫質裝置，會造成其他裝置資源浪費，特別是載入資源
為了兼顧移動端和pc端各自響應式的展示效果，難免會損失各自特有的互動方式
設定viewport：
高度定死，採用px做單位，寬度自適應，隨著螢幕寬度的變化，頁面也跟著變化，在寬度需要調整的時候使用響應式布局調整就可以實現適配了。
rem是乙個相對於字型大的相對單位，所以需要設定根html元素的字型大小，其他需要適配的元素也設定相應的rem即可。
實現原理：根據rem講頁面放大dpr倍，viewport設定1/dpr。這樣頁面的寬度，就是裝置寬度，device-width,device-width=裝置的物理解析度/(devicepixelratio * scale)
viewport是固定的：
通過以下**來控制rem基準值(設計稿以720px寬度量取實際尺寸)
!function (d)
if(h>720) h = 720;//設定基準值的極限值
g = h / 7.2;
a.style.fontsize = g + "px"
}if (b > 2) else else
}a.setattribute("data-dpr", b);
d.addeventlistener("resize", function () , false);
e()}(window);
以上就是解決移動適配的四種常見的方法，比較粗淺，繼續加油！
移動端適配問題
移動端web頁面，即常說的h5頁面 手機頁面 webview頁面等。適配問題產生的原因 手機裝置螢幕尺寸不一，做移動端的web頁面，需要考慮在安卓 ios的各種尺寸裝置上的相容，針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。適配的目標 在不同尺寸的手機裝置上，頁面相對...
移動端適配JS和CSS
移動端適配一般是兩種方式 一js方式 setrem window.addeventlistener orientationchange setrem window.addeventlistener resize setrem function setrem js方式書寫方便，而且適配所有的機型，但是...
關於移動端適配問題
移動端適配採用rem進行編寫css，整理了三種方案 方案一 簡單的js適配 function resizeroot width document.documentelement.style.fontsize devicewidth num1 px resizeroot 750 window.onre...