響應性web設計實戰總結(二)
閱讀目錄
對響應性web總結，之前總結過2篇文章；可以看如下：
http://www.cnblogs.com/tugenhua0707/p/4147569.html
http://www.cnblogs.com/tugenhua0707/p/4598657.html
今天我們再來講解下 對於移動端，我們如何開發；
背景知識
針對移動端css媒體查詢的開發,需要針對不同的手機寫不同的媒體查詢, 如下css代碼:
// 針對獨立像素在320px至359px之間的
@media (min-width: 320px) and (max-width:359px){}
// 針對獨立像素在360至399像素的
@media (min-width:360px) and (max-width: 399px) {}
// 針對獨立像素在400至450像素的
@media (min-width: 400px) and (max-width:450px){}
// 針對 獨立像素在 640至999像素的
@media (min-width: 640px) and (max-width:999px){}
如上css媒體查詢編寫代碼，為了更好的提高效率及開發，我們需要對所有手機進行等比例縮放，
一：字體計算方法
比如我們可以使用rem對字體作為單位，對html元素設置10px來進行計算；如下html元素的字體：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
假如現在設計稿給到我們前端的是720像素的話，那么在如上媒體查詢字體,寬度和高度及margin，padding需要等比例縮放操作；
@media (min-width: 320px) and (max-width:359px){ // 對於320-359 按照320px來計算 /* 720/320 = 2.25*/ html{font-size: 27.78%} // 62.5% / 2.25 } @media (min-width: 360px) and (max-width:399px){ // 對於360-399按照360px來計算 /* 720/360 = 2*/ html{font-size: 31.25 %} // 62.5% / 2 } @media (min-width: 400px) and (max-width:450px){ // 對於400-450按照400px來計算 /* 720/400 = 1.8*/ html{font-size: 34.72 %} // 62.5% / 1.8 } @media (min-width: 640px) and (max-width:999px){ // 對於640-999按照640px來計算 /* 720/640 = 1.125 */ html{font-size: 55.56%} // 62.5% / 1.125 }
二：width,height,margin及padding的計算方法
對於width，height，margin，padding針對不同的手機也是等比例縮放的，比如在720像素下的margin-top是40px；那么在320，360，400，640分別如下計算：(其他屬性的也一樣計算)
@media (min-width: 320px) and (max-width:359px){ /* 720/320 = 2.25*/ margin-top = 40px / 2.25 } @media (min-width: 360px) and (max-width:399px){ /* 720/360 = 2*/ margin-top = 40px / 2 } @media (min-width: 400px) and (max-width:450px){ /* 720/400 = 1.8*/ margin-top = 40px / 1.8 } @media (min-width:640px) and (max-width:999px){ /* 720/640 = 1.125 */ margin-top = 40px / 1.125 }
如上編寫代碼，我們可以看到，針對在PC端的代碼我們寫在最頂端，也就是針對PC端做一份，針對移動端也做一份頁面，因此在PC端的css代碼下面添加css媒體查詢；
/* PC端代碼如下 */
………….
// 如上是所有的PC端的css代碼；
那么移動端的css代碼，如果有和PC端不同的話，我們需要在下面編寫媒體查詢進行覆蓋掉；如下是css媒體查詢代碼；
……….. // css媒體查詢代碼
css媒體查詢代碼寫完，我們發現針對width，height，margin，padding無非就是除以倍數(比如720的頁面相對於要在640頁面上的 那么倍數是1.125，無非使用width/1.125)等屬性；因此我們想要是和JS一樣要是能定義一個變量那該多好了，因此想到預編譯css中的less(當然sass，stylus都可以)，使用less運算，那么代碼變成如下：
@media (min-width: 320px) and (max-width:359px){ /* 720/320 = 2.25*/ @multiple: 2.25; // 下面是所有的代碼 .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; } } @media (min-width: 360px) and (max-width:399px){ /* 720/360 = 2*/ @multiple: 2; // 下面是所有的代碼 .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; } } @media (min-width: 400px) and (max-width:450px){ /* 720/400 = 1.8*/ @multiple: 1.8; // 下面是所有的代碼 .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; } } @media (min-width:640px) and (max-width:999px){ /* 720/640 = 1.125 */ @multiple: 1.125; // 下面是所有的代碼 .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; } }
如上定義一個變量來編寫代碼，看着上面代碼，我們又發現代碼不好，太繁瑣了，針對移動所有的設備中的 “下面所有的代碼”注釋那塊 下面的代碼都是一樣的，我們現在又在考慮，要是css能和JS一樣能夠公用那該多好啊，於是我們想着使用less運算方法；我們可以使用.mixin() 這樣的（名字自己取）
把公用的代碼寫到.mixin()里面去；如下：
.mixin() {
// 下面是所有的公用的代碼
}
在如下各個條件下如下引用即可：
@media (min-width: 320px) and (max-width:359px){ /* 720/320 = 2.25*/ @multiple: 2.25; .mixin(); // 下面可以寫自己私有的css } @media (min-width:360px) and (max-width: 399px) { /* 720/360 = 2*/ @multiple: 2; .mixin(); // 下面可以寫自己私有的css } @media (min-width: 400px) and (max-width:450px){ /* 720/400 = 1.8*/ @multiple: 1.8; .mixin(); // 下面可以寫自己私有的css } @media (min-width: 640px) and (max-width:999px){ /* 720/640 = 1.125*/ @multiple: 1.125; .mixin(); // 下面可以寫自己私有的css }
如上，一切都很完美了，但是我們知道我們現在是寫的是less文件里面，因此如果我們想要看到頁面效果，我們需要對less文件進行編譯下即可；進入對應的目錄后，如下編譯即可：
lessc index.less > index.css
意思是把index.less文件目錄下生存index.css，因此我們直接在頁面上和以前一樣引入index.css即可；如下使用link引入的：
<link rel="stylesheet" href="./css/index.css" media="all"/>
和之前引入css沒有任何區別。
但是我們現在發現一個很煩的問題，我們每次改了下less文件后，不能和以前改css文件那樣，改完后后立即刷新頁面就可以看到效果，有時候我刷新半天，咦！！為什么沒有生效了？思考下 發現原來這是less文件，我們需要進行編譯下即可，但是每次改動下，我們都需要進行編譯，這個動作好煩，也很累，相信大家都一樣，因此我們需要考慮的是less有沒有能實時監聽的，能否實時編譯的，也就是說只要我改動less文件，它就能實時編譯成css文件，這樣我們效率明顯提高了！就這樣搜索下 找到有grunt和gulp，在這里我們使用gulp-less插件來監聽(不使用grunt插件，因為grunt配置沒有gulp方便)；
Gulp-less安裝及配置如下
首先我們需要知道的是先要安裝node及npm包管理器，有了這個環境后，我們就可以安裝Gulp；
Gulp安裝教程如下 http://www.dtao.org/archives/18 這邊就不對gulp進行介紹了；
現在我們先來看看我本地目錄結構：
1. 我們需要在本地手動或者 自動(使用命令npm init) 生成package.json文件；進入項目的根目錄下，使用命令如下：
填寫后完后，在根目錄下會生成一個package.json文件 ，我們再來查看下 package.json內容如下：
{ "name": "app2", "version": "1.0.0", "description": "this is for study gulp project", "main": "index.js", "dependencies": { "gulp-less": "^3.0.3", "gulp": "^3.9.0" }, "devDependencies": {}, "scripts": { "test": "test" }, "repository": { "type": "git", "url": "http://www.github.com/xx" }, "keywords": [ "gulp-less" ], "author": "tugenhua", "license": "ISC" }
我們現在再來看看目錄結構變成如下：
2. 本地安裝gulp及gulp-less； 進入項目的根目錄后 運行如下命令 npm install gulp –save-dev 在本地安裝gulp
運行命令：npm install gulp-less --save-dev
如上后 說明安裝成功了；
我們現在可以查看我們根目錄下 多了一個node_moudles文件夾，點擊進入后 有gulp和gulp-less文件夾，如下所示：
現在我們再來看看package.json內容如下：
{ "name": "app2", "version": "1.0.0", "description": "this is for study gulp project", "main": "index.js", "dependencies": { "gulp-less": "^3.0.3", "gulp": "^3.9.0" }, "devDependencies": { "gulp-less": "^3.0.3" }, "scripts": { "test": "test" }, "repository": { "type": "git", "url": "http://www.github.com/xx" }, "keywords": [ "gulp-less" ], "author": "tugenhua", "license": "ISC" }
接着我們需要在根目錄下創建gulpfile.js 代碼如下：
//導入工具包 require('node_modules里對應模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方 less = require('gulp-less'); //定義一個testLess任務（自定義任務名稱） gulp.task('testLess', function () { gulp.src('./css/index.less') //該任務針對的文件 .pipe(less()) //該任務調用的模塊 .pipe(gulp.dest('./css')); //將會在src/css下生成index.css }); gulp.task('testWatch', function () { gulp.watch('./css/*.less', ['testLess']); //當所有less文件發生改變時，調用testLess任務 }); //gulp.task('default',['testLess']); //定義默認任務 //gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數 //gulp.src(globs[, options]) 執行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數組) //gulp.dest(path[, options]) 處理完后文件生成路徑
執行命令
在命令行中 執行 gulp testWatch 即可 注意：該命令執行后需要處於打開狀態，關閉命令后監聽事件結束。
上面是基本使用，如果需要編譯多個less文件 代碼如下：
現在當我們手動修改less文件后，會自動編譯成css文件，這樣我們就方便多了，如下：
