移動端開發適配的2中方案

原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html

針對移動端適配的方案~

一： 第一種方案是：全部的單位使用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以下：

rem適配方案參考

 如上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模塊化加載；