開篇先說一下移動端的幾種布局的方式，現在常用的大致上分為以下四種，分別是1.靜態布局(static layou) 2.流式布局(liquid layout)，代表作有柵欄系統-->網格系統3.自適應布局.4.響應式布局.5.彈性布局（rem/em布局）
(function (doc, win)else
};if (!doc.addeventlistener) return
; win.addeventlistener(resizeevt, recalc,
false
); doc.addeventlistener(
'domcontentloaded
', recalc, false
);})(document, window);
這個根據個人螢幕尺寸可以自己調節，我的是把html的font-size變為100px,這樣在處理時可以直接拿原圖的單位px除100就得到了rem的單位了。
當然在index介面我們需要加一些meta標籤進行手機端的相容,主要有以下幾種：
"zh-cn
">
"utf-8
"> ---->（宣告文件中使用的字元編碼）
"viewport
" content="
width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no
" /> ----->（移動端視窗）
"screen-orientation
" content="
portrait
"/> ---->（uc強制豎屏）
"" content="
yes "
format-detection
" content="
telephone=no
"> ----->（禁止自動識別**和郵箱）
"full-screen
" content="
yes"> ---->（uc強制全屏）
"x5-fullscreen
" content="
true
"> ---->（qq強制全屏）
其實關於meta的標籤有很多，而且各種配置均不相同，具體的就不多闡述了。
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有rem布局 px轉rem工具的使用，本文將針對vue專案介紹一種px轉vw布局的實現方案。本文所用腳手架為vue cli搭建的，如何搭建請看作者的另一篇文章 vue cli3搭建vue專案 二 正文 要想實現px轉vw的自動轉化，需要在專案中自少引入如下4個依...
rem自適應布局 移動端自適應必備
由於移動端特殊性，本文講的是如何使用rem 實現自適應 或叫rem 響應式布局，通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著，我們只需要在根元素確定乙個px字型大小，則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素，可以設定這個基準值 假如瀏覽器的html...
移動端webapp自適應布局
請看這篇 hcysunyang的blog 一篇真正教會你開發移動端頁面的文章 二 width device width 這段 是讓布局視口的尺寸等於理想視口。裝置畫素比 dpr 裝置畫素個數 理想視口畫素個數 device width function doc,win win.addeventlis...