響應(yīng)性web設(shè)計(jì)實(shí)戰(zhàn)總結(jié)(二)

閱讀目錄

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

對(duì)響應(yīng)性web總結(jié)，之前總結(jié)過(guò)2篇文章；可以看如下：

http://www.cnblogs.com/tugenhua0707/p/4147569.html?

http://www.cnblogs.com/tugenhua0707/p/4598657.html

今天我們?cè)賮?lái)講解下 對(duì)于移動(dòng)端，我們?nèi)绾伍_(kāi)發(fā)；

回到頂部

背景知識(shí)

針對(duì)移動(dòng)端css媒體查詢的開(kāi)發(fā),需要針對(duì)不同的手機(jī)寫(xiě)不同的媒體查詢,?如下css代碼:

//?針對(duì)獨(dú)立像素在320px至359px之間的

@media?(min-width:?320px)?and?(max-width:359px){}

//?針對(duì)獨(dú)立像素在360至399像素的

@media?(min-width:360px)?and?(max-width:?399px)?{}

//?針對(duì)獨(dú)立像素在400至450像素的

@media?(min-width:?400px)?and?(max-width:450px){}

//?針對(duì) 獨(dú)立像素在?640至999像素的

@media?(min-width:?640px)?and?(max-width:999px){}

如上css媒體查詢編寫(xiě)代碼，為了更好的提高效率及開(kāi)發(fā)，我們需要對(duì)所有手機(jī)進(jìn)行等比例縮放，

一：字體計(jì)算方法

比如我們可以使用rem對(duì)字體作為單位，對(duì)html元素設(shè)置10px來(lái)進(jìn)行計(jì)算；如下html元素的字體：

html?{font-size:?62.5%;/*10?÷?16?×?100%?=?62.5%*/}

假如現(xiàn)在設(shè)計(jì)稿給到我們前端的是720像素的話，那么在如上媒體查詢字體,寬度和高度及margin，padding需要等比例縮放操作；

@media (min-width: 320px) and (max-width:359px){// 對(duì)于320-359 按照320px來(lái)計(jì)算/* 720/320 = 2.25*/ html{font-size: 27.78%} // 62.5% / 2.25 } @media (min-width: 360px) and (max-width:399px){// 對(duì)于360-399按照360px來(lái)計(jì)算/* 720/360 = 2*/ html{font-size: 31.25 %} // 62.5% / 2 } @media (min-width: 400px) and (max-width:450px){// 對(duì)于400-450按照400px來(lái)計(jì)算/* 720/400 = 1.8*/ html{font-size: 34.72 %} // 62.5% / 1.8 } @media (min-width: 640px) and (max-width:999px){// 對(duì)于640-999按照640px來(lái)計(jì)算/* 720/640 = 1.125 */ html{font-size: 55.56%} // 62.5% / 1.125 }

二：width,height,margin及padding的計(jì)算方法

對(duì)于width，height，margin，padding針對(duì)不同的手機(jī)也是等比例縮放的，比如在720像素下的margin-top是40px；那么在320，360，400，640分別如下計(jì)算：(其他屬性的也一樣計(jì)算)

@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 }

如上編寫(xiě)代碼，我們可以看到，針對(duì)在PC端的代碼我們寫(xiě)在最頂端，也就是針對(duì)PC端做一份，針對(duì)移動(dòng)端也做一份頁(yè)面，因此在PC端的css代碼下面添加css媒體查詢；

/*?PC端代碼如下?*/

………….

//?如上是所有的PC端的css代碼；

那么移動(dòng)端的css代碼，如果有和PC端不同的話，我們需要在下面編寫(xiě)媒體查詢進(jìn)行覆蓋掉；如下是css媒體查詢代碼；

………..?//?css媒體查詢代碼

?css媒體查詢代碼寫(xiě)完，我們發(fā)現(xiàn)針對(duì)width，height，margin，padding無(wú)非就是除以倍數(shù)(比如720的頁(yè)面相對(duì)于要在640頁(yè)面上的?那么倍數(shù)是1.125，無(wú)非使用width/1.125)等屬性；因此我們想要是和JS一樣要是能定義一個(gè)變量那該多好了，因此想到預(yù)編譯css中的less(當(dāng)然sass，stylus都可以)，使用less運(yùn)算，那么代碼變成如下：

@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; } }

如上定義一個(gè)變量來(lái)編寫(xiě)代碼，看著上面代碼，我們又發(fā)現(xiàn)代碼不好，太繁瑣了，針對(duì)移動(dòng)所有的設(shè)備中的??“下面所有的代碼”注釋那塊?下面的代碼都是一樣的，我們現(xiàn)在又在考慮，要是css能和JS一樣能夠公用那該多好啊，于是我們想著使用less運(yùn)算方法；我們可以使用.mixin()?這樣的（名字自己取）

把公用的代碼寫(xiě)到.mixin()里面去；如下：

.mixin()?{

//?下面是所有的公用的代碼

}

在如下各個(gè)條件下如下引用即可：

@media (min-width: 320px) and (max-width:359px){/* 720/320 = 2.25*/@multiple: 2.25;.mixin();// 下面可以寫(xiě)自己私有的css } @media (min-width:360px) and (max-width: 399px) {/* 720/360 = 2*/@multiple: 2;.mixin();// 下面可以寫(xiě)自己私有的css }@media (min-width: 400px) and (max-width:450px){/* 720/400 = 1.8*/@multiple: 1.8;.mixin();// 下面可以寫(xiě)自己私有的css }@media (min-width: 640px) and (max-width:999px){/* 720/640 = 1.125*/@multiple: 1.125;.mixin();// 下面可以寫(xiě)自己私有的css}

如上，一切都很完美了，但是我們知道我們現(xiàn)在是寫(xiě)的是less文件里面，因此如果我們想要看到頁(yè)面效果，我們需要對(duì)less文件進(jìn)行編譯下即可；進(jìn)入對(duì)應(yīng)的目錄后，如下編譯即可：

lessc?index.less?>?index.css?

意思是把index.less文件目錄下生存index.css，因此我們直接在頁(yè)面上和以前一樣引入index.css即可；如下使用link引入的：

<link?rel="stylesheet"?href="./css/index.css"?media="all"/>?

和之前引入css沒(méi)有任何區(qū)別。

但是我們現(xiàn)在發(fā)現(xiàn)一個(gè)很煩的問(wèn)題，我們每次改了下less文件后，不能和以前改css文件那樣，改完后后立即刷新頁(yè)面就可以看到效果，有時(shí)候我刷新半天，咦！！為什么沒(méi)有生效了？思考下?發(fā)現(xiàn)原來(lái)這是less文件，我們需要進(jìn)行編譯下即可，但是每次改動(dòng)下，我們都需要進(jìn)行編譯，這個(gè)動(dòng)作好煩，也很累，相信大家都一樣，因此我們需要考慮的是less有沒(méi)有能實(shí)時(shí)監(jiān)聽(tīng)的，能否實(shí)時(shí)編譯的，也就是說(shuō)只要我改動(dòng)less文件，它就能實(shí)時(shí)編譯成css文件，這樣我們效率明顯提高了！就這樣搜索下?找到有g(shù)runt和gulp，在這里我們使用gulp-less插件來(lái)監(jiān)聽(tīng)(不使用grunt插件，因?yàn)間runt配置沒(méi)有g(shù)ulp方便)；

回到頂部

Gulp-less安裝及配置如下

首先我們需要知道的是先要安裝node及npm包管理器，有了這個(gè)環(huán)境后，我們就可以安裝Gulp；

Gulp安裝教程如下?http://www.dtao.org/archives/18??這邊就不對(duì)gulp進(jìn)行介紹了；

現(xiàn)在我們先來(lái)看看我本地目錄結(jié)構(gòu)：

1. ?我們需要在本地手動(dòng)或者?自動(dòng)(使用命令npm?init)?生成package.json文件；進(jìn)入項(xiàng)目的根目錄下，使用命令如下：

填寫(xiě)后完后，在根目錄下會(huì)生成一個(gè)package.json文件?，我們?cè)賮?lái)查看下?package.json內(nèi)容如下：

{"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" }

我們現(xiàn)在再來(lái)看看目錄結(jié)構(gòu)變成如下：

2.?本地安裝gulp及gulp-less；?進(jìn)入項(xiàng)目的根目錄后?運(yùn)行如下命令?npm?install?gulp?–save-dev?在本地安裝gulp

?

運(yùn)行命令：npm?install?gulp-less??--save-dev

如上后?說(shuō)明安裝成功了；

我們現(xiàn)在可以查看我們根目錄下?多了一個(gè)node_moudles文件夾，點(diǎn)擊進(jìn)入后?有g(shù)ulp和gulp-less文件夾，如下所示：

現(xiàn)在我們?cè)賮?lái)看看package.json內(nèi)容如下：

{"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" }

接著我們需要在根目錄下創(chuàng)建gulpfile.js?代碼如下：

//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方 less = require('gulp-less'); //定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱） gulp.task('testLess', function () {gulp.src('./css/index.less') //該任務(wù)針對(duì)的文件.pipe(less()) //該任務(wù)調(diào)用的模塊.pipe(gulp.dest('./css')); //將會(huì)在src/css下生成index.css }); gulp.task('testWatch', function () {gulp.watch('./css/*.less', ['testLess']); //當(dāng)所有l(wèi)ess文件發(fā)生改變時(shí)，調(diào)用testLess任務(wù) }); //gulp.task('default',['testLess']); //定義默認(rèn)任務(wù) //gulp.task(name[, deps], fn) 定義任務(wù) name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù) //gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件 globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) //gulp.dest(path[, options]) 處理完后文件生成路徑

執(zhí)行命令

在命令行中?執(zhí)行?gulp?testWatch?即可?注意：該命令執(zhí)行后需要處于打開(kāi)狀態(tài)，關(guān)閉命令后監(jiān)聽(tīng)事件結(jié)束。

上面是基本使用，如果需要編譯多個(gè)less文件?代碼如下：

現(xiàn)在當(dāng)我們手動(dòng)修改less文件后，會(huì)自動(dòng)編譯成css文件，這樣我們就方便多了，如下：

轉(zhuǎn)載于:https://www.cnblogs.com/tugenhua0707/p/4690986.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。