作為後端程式設計師，前端的東西就只會一些基本的html、css、JavaScript。突然我要做一個手機上的html。需要實現響應式，適應不同解析度的手機，這個是一個讓我頭大的問題。在網上找了好久，都說用什麼vue+px2rem或者是fix3+px2rem。前端的框架很少用，根本一時間來不及學那些了。於是請教了一下前端的朋友，他說就用px2rem就行了很簡單。於是琢磨了一下午。把過程貼一下。

①原理：px2rem是一個工具，用這個工具讀css檔案，將檔案中的px單位轉換為rem單位。當然是合理的轉換。（網上也有些人貼了手寫的幾行轉換操作的js，我覺得不是很可靠）
②步驟：先安裝px2rem這個工具，再用這個工具對我們已經調好的CSS檔案進行編譯。（安裝px2rem的前提是要先安裝node.js+npm）。
1、去官網下載：

https://nodejs.org/zh-cn/ 安裝檔案。
2、安裝下載好的node.msi安裝包
3、開啟cmd視窗錄入：node -v檢視版本資訊，是否安裝成功，再試npm -v檢視npm版本資訊。
4、資訊無誤過後，安裝px2rem。在cmd中執行命令過後自動下載安裝：npm install -g px2rem
5、安裝好過後就可進行css檔案的編譯了。還是在CMD中執行編譯命令：px2rem -o build src/*.css。其中-o表示輸出，build是輸出目標一個資料夾，可以自定義。後面的css就是你的檔案了。
6、如果你的檔案叫A.css，那麼編譯過後，會出現一個build資料夾，裡面會有一個A.debug.css檔案。這個檔案就是轉成了rem過後的檔案。
編譯前後效果圖：

編譯後：

7、你的手機端html中引入A.debug.css這個檔案看效果.8，你會發現，效果不對，完全變小了。效果如下：

是因為你沒有設定html標籤的字型大小。好像是因為rem會更具html的font-size來變換。而font-size又需要根據不同機型的解析度來獲取。所以我們需要在html的head那裡加一段。內容如下：

@media(min-device-width:320px){html{font-size: 32px;/*no*/}}
@media(min-device-width:360px){html{font-size: 36px;/*no*/}}
@media(min-device-width:375px){html{font-size: 37.5px;/*no*/}}
@media(min-device-width:384px){html{font-size: 38.4px;/*no*/}}
@media(min-device-width:412px){html{font-size: 41.2px;/*no*/}}
@media（min-device-width：414px）{html {font-size：41.4px; / * no * /}} 
@media（min-device-width：480px）{html {font-size：48px; / *沒有* /}} 
@media（min-device-width：540px）{html {font-size：54px; / * no * /}} 
@media（min-device-width：560px）{html {font-size：56px; / * no * /}} 
@media（min-device-width：600px）{html {font-size：60px; / * no * /}} 
@media（min-device-width：768px）{html {font-size：76.8px; / * no * /}}
@media（min-device-width：800px）{html {font-size：80px; / * no * /}} 
@media（min-device-width：1080px）{html {font-size：108px; / * no * /}}
@media（min-device-width：1280px）{html {font-size：128px; / * no * /}} 
@media（min- device-width：1440px）{html {font-size：144px; / * no * /}}
@media（min- device-width：1600px）{html {font-size：160px; / * no * /}}

 

效果圖如下：

9、然後再檢視效果，就會發現比剛才效果好一點，但是還是偏差很大。這時候我們需要使用一個。，px2rem有一個引數-u。用來設定rem的單位。就是1rem等於多少px，預設是75。但是明顯預設值不對。

10、然後就需要重新編譯檔案，帶上引數：px2rem -u 50 -o build src/*.css。
這裡的50是隨便寫的，你可以先試大於75的值看看效果，如果不對，就試試小於75的值。我這裡是小於75的值才適合。最好我的引數設定為42，幾乎接近我原稿樣式。並且在不同解析度下都 能保持很好的效果。
引數測試：

最終效果：

就是還有個問題。如果不需要轉成rem的px單位，比如border邊框不需要轉，那麼需要在後面加上/no/。例如：

.selector {
width: 150px;
height: 64px; /px/
font-size: 28px; /px/
border: 1px solid #ddd; /no/
}

詳細可看網址：

最終效果還是有點偏差，反正就是這樣調整就是了。對了我寫的這個網站地址是：http://www.schoolpi.cn。用機會可以看看。