移動端開發適配總結

龍恩0707發表於2016-06-07

移動端開發適配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如下：

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模組化載入；

相關文章