原文章：
手機端的頁面需求大多數為：自動適應不同手機的螢幕，包括平板，以往的處理方式通常都是：1.根據不同的解析度製作不同的頁面，然後通過js來處理選擇顯示哪個頁面。2.通過**查詢來編寫多種css樣式，讓其自動選擇。3.使用百分比。
但這兩種方式都有乙個很大的缺點，無法做到完全適應所有解析度，例如有乙個按鈕大小設定成100px*200px，你通過**查詢的方式來處理低於320*568的螢幕，假設乙個裝置的解析度是280*360，那就會出現乙個問題，該按鈕在320*568的解析度可能是剛剛合適的，但在280*360的解析度下，你會發現還是很大。
上面的兩種方式都無法完全的動態解決，即便使用百分比的方式，也可能會出現樣式的問題，這裡我們引入乙個css3的新的單位：rem，css3的計算方法：calc()，以及css3的變數：(:root)，下面我簡單講解下這三個東西。
rem：rem是乙個新的單位，該單位與html頁面的fontsize有關，一般預設的瀏覽器的fontsize是16px，因此一般的1rem=16px。
calc()：這是乙個用於在css中計算的函式，只能進行四則運算。
:root 在css中，這是乙個偽類，但現在我們所說的不是偽類，而是css中的變數，定義方法：:root，使用方法：span
有了這三樣東西，我們就可以編寫乙個通用的適應所有螢幕的js檔案，下面通過專案來詳細說明。
公司中有乙個手機端網頁的設計稿，如下圖，尺寸是750*1334，通過chrome瀏覽器的除錯面板，我切換到手機模式，並且選擇iphone5型號的螢幕來除錯，i5的解析度是320*568，右上角的選單按鈕在設計稿中的尺寸是40*24，於是這裡就有了乙個設計稿尺寸和螢幕尺寸的比例，根據這個比例將其與rem強行掛鉤。
js:
var width=document.documentelement.clientwidth;//獲取螢幕的寬度
var height=document.documentelement.clientheight;//獲取螢幕的高度
var bili1=width/750;//螢幕寬度與設計稿寬度的比例（750是設計稿的寬度）
var bili2=height/(1336-48);//螢幕高度與設計稿高度的比例(1336是設計稿的高度，其中48是設計稿中含有手機頂部的狀態列，需要去掉，1366-48才是真正需要顯示的東西)
var bili=bili1css:
:root
.header
凡是涉及長度的例如padding，margin，height，width等都可以用calc(40 * var(--bili))的方式動態計算出實際的值，這樣就實現了100%的自適應，電腦端的也能夠自適應！
補充：最後需要在裡新增，其作用看屬性就知道，用來適應手機螢幕的寬度和高度
相容性：
移動端螢幕自適應（筆記）
首先單位自適應，使用rem做單位，rem根據根標籤來決定，若html的font size為50px 那麼1rem就是50px 然後我們在根據螢幕大小來給html定義font size 把以下 寫到index.html中 fnresize window.onresize function functi...
螢幕自適應
1 media screen and max width 240px 寬度小於240px執行 media screen and min width 240px 寬度大於240px執行 2 flexible.js 在所有資源載入之前先放入 3 使用數值單位時可以嘗試使用rem作為單位替代px。rem一...
手機端 自適應頁面rem
一 手機端自適應rem 1 樣式重置 定義字型大小 樣式重置這塊省略，大同小異 定義字型大小 media screen and min width 320px body media screen and min width 360px body media screen and min width ...