移動端的布局主要分為四類，分別是流式布局，rem布局，響應式布局和彈性布局。四種布局都能很好的適應手機螢幕解析度。
1 、流式布局：通過設定viewport可視視窗：
2、 rem布局
首先，1rem等於html標籤的font-size值，rem布局就是通過在不同解析度下html的font-size值的調節，適配不同的裝置進行等比縮放。這時候又引進了乙個新的單位「vw」，通過vw、rem、html的font-size值三個單位的轉換，達到rem布局。螢幕分成100等份。1%等於1vw，根據iphone6、7、8下螢幕解析度是375px，可得1vw == 3.75px，100px == 26.666667vw，所以設定html根元素的font-size值為26.666667vw，在iphone6、7、8下同樣的100px等於100px，iphone6、7、8plus下螢幕解析度為414px，1vw == 4.14px，4.14 * 26.666667 == 110.4px，所以在375px的螢幕解析度下100px等於100px，而414px螢幕解析度下100px等110.4px，不同解析度下元素的大小也是等比縮放的，這就是rem布局。
3 、 響應式布局
響應式布局，簡言之就是一套**適應多種螢幕解析度，適用小**，頁面轉換不多的部落格，小型活動介紹和企業簡章等。
這種布局一定程度上簡化了**量，提高了**的利用率，也減輕了前端工作量，頁面切換美觀，吸引眼球。
4 、 彈性布局
高度定死，寬度自適應，元素都採用px做單位。
隨著螢幕寬度變化，頁面也會跟著變化，效果就和pc頁面的流體布局差不多，在那個寬度需要調整的時候使用響應式布局除錯就行（比如網易新聞），這就實現了適配。
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...