這是最笨工作量最大的方法了，就是乙個螢幕尺寸乙個螢幕尺寸的適配，當然你沒辦法適配到所有的手機型號，有的手機比較奇葩，同樣是5.5寸，有的矮胖，有的瘦高。我的方法是以iphone6為準，然後向上適配5.5寸，向下適配4.7的iphone5，這個時候就能自適應市場上的一些主流螢幕，然後在對其他品牌手機挑一部分手動適配。
對於工作量小的專案，這個方法還是簡單有效的，當然沒辦法覆蓋所有裝置，只是乙個沒辦法的辦法，這樣做其實很痛苦，工作量也大。
對於流式布局的頁面，我們只要把寬度設定為百分比，而高度設定為px，這樣寬度就可以自適應，高度由於是流式布局，損失一點美感，再搭配簡單的**查詢，不會對布局造成太大的影響。
不過我在工作中寫的最多的是一些比較不常規的頁面，比如下面的這個蛋和錘子都是用絕對定位放上去的，這個時候不管是寬度還是高度都得照顧到。
剛開始我為了讓這顆蛋乖乖待在乙個位置，用**查詢寫了好多位置和大小寬度，費時費力。
css3新增的單位，相對於視窗的寬度或高度，100vh代表整個可視區域，不包括標題欄狀態列底欄等區域，詳細的可以看一下張鑫旭大神的文章 視區相關單位vw, vh..簡介以及可實際應用場景。
在很早之前找解決方案的時候就看到這篇文章了——使用flexible實現手淘h5頁面的終端適配。
當時工作趕得比較緊（其實是自己懶沒仔細看），以為要用到grunt還需要打包發布，是用在手淘這種大專案，不適合自己搗鼓的小頁面，所以就略過了......
後來找個時間好好拜讀了之前的那篇文章，其實只需要匯入乙個 js 庫就可以使用了。
神器。以後的專案應該都會使用這個方案。
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...
移動端適配
不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...
移動端適配
無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...