由于最近想開發(fā)一款響應(yīng)式系統(tǒng)雇卷，之前對于響應(yīng)式都只是略有了解，沒有怎么歸納整理鲸睛，現(xiàn)在來做一個總結(jié)娜饵。
@media媒體查詢
響應(yīng)式布局一定離不開媒體查詢。
media mediatype and|not|only (media feature) {
CSS-Code;
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
在這里mediatype一般是screen官辈，在這里media feature一般是max-width箱舞、min-width定義的是可見區(qū)域。你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
當然在手機端我們一般是會禁止縮放的
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
bootstrap 柵格系統(tǒng)實現(xiàn)
http://v3.bootcss.com/css/#grid
這個開發(fā)工具是基于bootstrap的http://www.layoutit.com的布局工具
bootstrap中是使用float來進行布局拳亿，然后通過偽元素來進行浮動清除
@media (min-width: 992px)
.col-md-4 {
width: 33.33333333%;
}
@media (min-width: 992px)
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
float: left;
}
.row:after, .row:before {
clear: both;
display: table;
content: " ";
}
主流屏幕尺寸定義
/* 超小屏幕（手機褐缠，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎风瘦？） */
/* 小屏幕（平板队魏，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器万搔，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
圖片
img { max-width: 100%; }
當然還有一種比較巧妙的方式
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
也就是會根據(jù)不同尺寸胡桨，加載不同的圖片資源，這個方法非常巧妙瞬雹。data-*允許我們可以在HTML元素中存儲一些數(shù)據(jù)昧谊。而且我們可以很方便的通過el.dataset來進行存取刪除等等。
字體
另一個比較重要的就是字體的運用酗捌，em是根據(jù)父元素的font-size來進行計算呢诬，rem是根據(jù)根元素html的font-size來進行計算。
html { font-size:100%; }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
移動端1px效果
css中的1px并不總是等于物理像素1px胖缤。
在移動端瀏覽器中以及某些桌面瀏覽器中尚镰，window對象有一個devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨立像素的比例哪廓，也就是 devicePixelRatio = 物理像素 / 獨立像素狗唉。css中的px就可以看做是設(shè)備的獨立像素，所以通過devicePixelRatio涡真，我們可以知道該設(shè)備上一個css像素代表多少個物理像素分俯。例如肾筐，在Retina屏的iphone上，devicePixelRatio的值為2缸剪，也就是說1個css像素相當于2個物理像素吗铐。例如在devicePixelRatio為2的設(shè)備中，我們設(shè)置1px杏节，實際上是有兩個物理像素的唬渗，關(guān)于移動端的1px解決辦法，可以參考這篇文章拢锹。
http://www.cnblogs.com/lunarorbitx/p/5287309.html
http://blog.csdn.net/yuhk231/article/details/53976295
調(diào)試技巧：我們可以通過[]草料二維碼生成器](https://cli.im/)生成二維碼谣妻。然后手機掃碼萄喳，就可以在手機上看到電腦上的頁面卒稳。當然手機和電腦必須要在同一局域網(wǎng)。而且要用IP訪問他巨，也就是將localhost換成你的電腦IP地址充坑。由于我使用的是webpack構(gòu)建的項目，需要進行如下配置：
"dev": "webpack-dev-server -d --hot --inline --colors --progress --env.dev --public --host 0.0.0.0",
然后在webpack-dev-server中配置disableHostCheck: true
devServer: {
// 配置監(jiān)聽端口
port: 8080,
disableHostCheck: true
}
參考資料
http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html
