移動端web頁面的開發，由於手機螢幕尺寸、解析度不同，或者需要考慮橫豎屏問題，為了使得web頁面在不同移動裝置上具有相適應的展示效果，需要在開發過程中使用合理的適配方案來解決這個問題。
流式布局並不是最理想的實現方式，通過大量的百分比布局，會經常出現許多相容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多侷限性。
還有一種是固定頁面寬度的做法，早期有些**把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式布局限制自己的設計靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有乙個就是大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，手機**首頁起初是這麼做的，但近期改版了，採用了rem。
通過查詢裝置的寬度來執行不同的 css **，最終達到介面的配置。核心語法是：
@media screen and (max-width: 600px)在寫頁面時，直接使用px, 將頁面寫死。再通過設定 viewport 來對頁面進行縮放的方法，使用適配。這個方法簡單粗暴，又高效。不過，使用過程中有反應縮放會導致有些頁面元素會糊的情況.
這個方案，很好的解決了，使用viewport 縮放會糊的情況
viewport 是固定的, 使用rem 來適配（需要進行px與rem的轉換）
舉個例子：
html
.btn
html
@media only screen and (min-width: 401px)
}
vw和vh是相對於視口的寬度/高度，即：
100vw = 視口的寬度
100vh = 視口的高度
參考：
移動端螢幕適配方案
物理畫素 解析度devicepixelratio layout viewport visual viewport ideal viewport 需要用到 meta viewport 中有6個通用屬性 移動頁面設計 480 854的比例 dpi 480 screen.width window.devi...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...