移動端開發適配2種方案總結
針對移動端適配的方案~
一： 第一種方案是：所有的單位使用rem來適配；
首先在頁面上設置html的font-size的大小；如下我項目中的設置：
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
html的默認字體大小為100px；是針對於320px來設置的，那么在360px，400px，640px下都需要等比例縮放；
計算公式為： 320px/100 = 360 / x; 那么 x = (360*100 / 320) px; 其他的等比例縮放也是這個意思；
那么設計師給的設計稿給我們的都是默認640px的設計稿；因此我們可以知道font-size:200px; 因此我們可以設置此倍率為200；想px轉化為rem的話，
只要知道設計稿多少像素，比如圖片的高度是500px；我們需要轉換rem的話，計算公式如下：rem = (500 / 200) rem; 其他的屬性也是一個意思；比如font-size,margin, padding, 等等屬性都是這樣計算的 即可轉化為rem；我們使用簡單的less預編譯語言進行計算即可；
比如想保留2位小數；可以如下寫 xx = round(500rem/200,2);
二：第二種方案是：純碎使用px作為單位；(css3媒體查詢如下：)
/* 對於400-450按照400px來計算 */ @media (min-width: 400px) and (max-width:450px){ /* 640/400 = 1.6*/ @multiple: 1.6; .mixin(@multiple); /* 下面可以寫一些私有css屬性覆蓋掉 */ } /* 對於360-399按照360px來計算 */ @media (min-width: 360px) and (max-width:399px){ /* 640/360 = 1.78 */ @multiple: 1.78; .mixin(@multiple); /* 下面可以寫一些私有css屬性覆蓋掉 */ } /* 對於320-359按照320px來計算 */ @media (min-width: 320px) and (max-width:359px){ /* 640/320 = 2*/ @multiple: 2; .mixin(@multiple); /* 下面可以寫一些私有css屬性覆蓋掉 */ }
/* 下面的mixin函數是使用less預編譯語言的，里面需要使用到round方法自動計算各個值 */
.mixin(@multiple){
// 比如高度為500px的話，那么計算公式如下：
height: round(500px / @multiple,2);
// 下面其他的屬性值也是一個意思的，設計稿給的多少像素的話，就寫多少像素，然后進行計算即可;
}
其他的不需要計算的屬性可以寫在函數外面，這樣就有一個缺點，就是你不寫在外面，都寫在mixin函數里面的話，那么在每次調用mixin函數內都會生成
一份代碼；代碼重復了；如果我不寫在里面的話，在不需要計算的樣式都寫在外面的話，那么假如很多類的屬性有需要計算的，有不需要計算的，那么就會把
一個css樣式分成2份寫，對於代碼維護不太友好；因此如果項目中能使用rem的話，盡量建議使用第一種方案，使用rem作為單位來適配移動端開發；
不過這兩種方案都可以達到適配效果~
使用rem作為單位來對手機適配的demo如下：
如上git代碼已經放了demo，我們可以通過git 克隆下來即可：
如： git clone https://github.com/tugenhua0707/remAdapter.git
然后進入使用命令進入該目錄后；在本地取個服務器可以運行命令 gulp server -d ；過一些時間會在本地上開啟一個服務器；如：http://localhost:3000/
但是這樣是訪問不到頁面的；因為我gulpfile.js代碼全部打包到build文件夾下：比如項目打包后的路徑：
build
css
html
images
js
因此我們可以在 http://localhost:3000/build/html/ 即可訪問到index.html了；同時我們可以打開src源文件下的html下的index.html；可以看到 對應css
<link type="text/css" rel="stylesheet" href="@@@PREFIX@@@/css/index.css" />
image圖片 使用 @@@PREFIX@@@/images/heart.png 這樣的路徑來引入的；及js文件引入也是通過 @@@PREFIX@@@ 作為前綴來引入路徑的；這樣使用變量做的好處是 可以通過判斷是線上環境還是開發環境，如果是開發環境的話 @@@PREFIX@@@ 在打包后，會自動替換成 http://localhost:3000/build 這樣的，對於線上的環境 可以根據自己的項目的需要替換成響應的路徑即可；這些配置都在gulpfile.js內可以看得到，使用了gulp-replace插件進行替換；
同時頁面使用了browser-sync插件，可以實時監聽html，css，js動態改變，只需要按ctrl+s保存操作，頁面會自動刷新；
也支持js的模塊化的加載依賴文件，使用了browserify插件進行js模塊化加載；