之前一直都在做電腦端的網頁製作，幾乎沒有接觸過手機端的頁面開發，在我看來，開發手機端的頁面還不如直接用安卓原生或者react-native開發，但由於公司的需求，於是我只能硬著頭皮來解決。     手機端的頁面需求大多數為：自動適應不同手機的螢幕，包括平板，以往的處理方式通常都是：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{ --a:#fff ;}，使用方法：span{color:var(--a);}     有了這三樣東西，我們就可以編寫一個通用的適應所有螢幕的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=bili1<bili2?bili1:bili2;//寬度的比例和高度的比例進行比較，取值最小的
	var html = document.querySelector('html');//選擇html節點
  	var rem = 16;//手動設定rem與px的比例；
  	html.style.fontSize = rem + "px";//設定html的預設fontsize為16px。(注意，瀏覽器中最小值為12px，)
	var __bili=bili/rem;//將比例和rem進行聯絡。
	document.documentElement.style.setProperty('--bili', __bili+"rem");//設定css中的變數為--bili，值為__bili
 

CSS:

:root{
	--bili:0.027rem;	
}
.header{
	height:calc(var(--bili) * 80);
}

這裡說下var __bili=bili/rem ，在我上面的設定裡，1rem=16px；而設計稿按鈕的寬度為40px，按照上面程式碼的比例320/750來算，在iphone5上的尺寸應該是：40*320/750 ，大概為17px。我們按照程式碼的變數來換成公式：width=relWidth*bili ==> width=relWidth*bili*rem/16  這裡bili就和rem存在聯絡了：bili/16就是程式碼上的bili/rem，那麼化簡下就是width=rekWidth*var(--bili) relWidth是設計稿中按鈕實際的寬度。在css中的引用：div{width:calc(40 * var(--bili))} 注意calc()運算子必須和數值用空格分開！

凡是涉及長度的例如padding，margin，height，width等都可以用calc(40 * var(--bili))的方式動態計算出實際的值，這樣就實現了100%的自適應，電腦端的也能夠自適應！

補充：最後需要在<header>裡新增<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">，其作用看屬性就知道，用來適應手機螢幕的寬度和高度

相容性：

設計稿：

效果圖：