目前我所知道是有幾種方法來做適配:
1.使用rem單位來做網頁適配，這個是我比較推薦的一種，效果很好，瀏覽器的相容性也不錯
只要一行**就能適配多個解析度終端
(function(doc,win);上面是做適配的**。改變html的font-size,更詳細的rem用法在這裡不作過多講解，請網上搜一下（建議基礎值設定大一點可以避免因為精度丟失引起的布局錯亂，上面我設定的是100px）docel.style.fontsize = 100 * (clientwidth/750) + 'px';
};recalc();
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document,window)
2.第二種就是使用瀏覽器的縮放功能來做，
先按設計稿還原html，然後再設定viewport屬性，
(function()elsem+='target-densitydpi=device-dpi">';
document.write(m);
}());
3.適應響應式布局來做，用**查詢，具體的可以參考bootstrap，
弊端:冗餘**較多，要做多個解析度的適配，css**寫的較多。個人不太建議使用這種，除非用成熟的bootstrap框架節省一些工作量。
4.使用自適應百分比來布局，
這種方法比較古老，做出來的介面在各個解析度的適配上比較不好，例如乙個div在解析度為320*568是320px * 100px 在375 * 667 的解析度顯示就是 375px * 100px 效果不是等比拉公升
個人建議使用第一種來做，完美適配任意終端，相容性槓槓的
前端 移動端適配
參考部落格 移動前端自適應適配布局解決方案 使用flex彈性布局，元素寬度自適應，高度固定為某個px值。這種適配方式是以html的font size值為基礎，所有元素的畫素大小都使用rem表示 除了font size以外 固定視口，縮放值為1.0 計算基礎font size值font size值的計...
移動端適配的方法
1.利用meta的viewport做適配 在裡面加乙個script的處理 然後css的寫法就是按照正常量到的設計稿尺寸就可以了，單位為px 2.利用 手淘 rem less 做適配 less編譯成css，頁面只需要引入css就可以了，引入檔案 1 flexible.js 2 less編譯後的css檔...
談談移動端螢幕適配的幾種方法
響應式布局 簡而言之，就是頁面元素的位置隨著螢幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被 壓縮 的空間。如上圖，其實就相當於頁面被壓矮了。cover布局 就跟background size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者佔滿螢幕，超出的內容會被隱...