響應性web設計實戰總結(二)

閱讀目錄

• 背景知識：
• Gulp-less安裝及配置如下

對響應性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文件，這樣我們就方便多了，如下：

轉載于:https://www.cnblogs.com/tugenhua0707/p/4690986.html

總結

以上是生活随笔為你收集整理的响应性web设计实战总结(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。