时间： 14:51 来源： 作者：heyuchan
　　在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：　　布局类型　　布局实现　　采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。　　固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸;　　可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局;　　弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;　　混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。　　可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式：其中可切换的固定布局的实现成本最低，但拓展性比较差;而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。　　布局响应　　对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);　　无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)，　　我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：　　布局不变，即页面中整体模块布局不发生变化，主要有：　　模块中内容：挤压-拉伸;　　模块中内容：换行-平铺;　　模块中内容：删减-增加;　　布局改变，即页面中的整体模块布局发生变化，主要有：　　模块位置变换;　　模块展示方式改变：隐藏-展开;　　模块数量改变：删减-增加;　　很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。
围观: 9999次 | 责任编辑：坐怀不乱
您可以分享到:
13353 人浏览
21507 人浏览
27451 人浏览
3052 人浏览
15256 人浏览
本站由七牛提供云存储响应式布局产品用户体验这么差，你老板知道吗？ - A5站长网
当前位置：
响应式布局产品用户体验这么差，你老板知道吗？
17:08&&来源：&
　　&响应式&这个词现在越来越流行了，它的出现，对于WEB前端的设计还是code，起到了很大的推动作用。
　　随着网民生活水平的提高，电脑和手机屏幕越来越大，对于产品的用户体验会要求越来越多，这必然导致行业内各公司的产品竞争越来越烈。
　　如果你经常关注到一些门户网站，比如淘宝、乐视等， 发现他们现在的网站布局不同分辨率下有着不同的效果，这种技术也是以后的一种趋向了，不仅仅是在PC端，而在我们的移动端，也是如此。现在人手基本一部智能机器，分辨率也是很多种，如何在不同分辨率下，给用户带去更好的体验，作为前端人员应该多花点心思了。在项目过程中，我们经常会被产品以及测试人员问到 类似下面的问题：
　　& 为什么用三星S4和苹果4/5错位、换行，图片质量太差?
　　& 为什么我用笔记本和台式电脑上浏览，效果不一样?
　　& 能不能保证在不同分辨率下内容都能充满屏幕啊?
　　针对以上问题，我们引入Media Queries来解决。你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种 样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不同的样式效果。
　　下面让我们详细讲下如何应用Media Queries吧!
　　Media Queries
　　打开Demo页面，调整浏览器的大小，查看页面布局变化情况。
　　Max Width
　　当页面视图区域小于600px宽度的时候，css会被使用到。
　　@media screen and (max-width: 600px) {
　　.class {
　　background: #
　　你也可以使用下面的方式，在页面的中引用外部css文件。
　　Min Width
　　当视图区域大于900px宽度的时候，css会被使用到。
　　@media screen and (min-width: 900px) {
　　.class {
　　background: #666;
　　多个 Media Queries
　　你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css。
　　@media screen and (min-width: 600px) and (max-width: 900px) {
　　.class {
　　background: #333;
　　设备Width
　　下面的css会在 max-device-width为480px的时候使用，例如iphone。
　　注意：max-device-width指的是设备实际分辨率，max-width指的是可是区域尺寸。
　　@media screen and (max-device-width: 480px) {
　　.class {
　　background: #000;
　　针对 iPhone 4
　　下面的时针对iphone4的css。
　　针对 iPad
　　你也可以在ipad上检查定位(portrait 或者 landscapse)。
　　针对Internet Explorer的Media Queries
　　因为ie8以及之前版本的ie浏览器不支持media query，你需要使用JavaScript的hack计较解决问题。下面是一些解决方案：
　　CSS Tricks - 使用jquery判断浏览器尺寸
　　The Man in Blue - 使用Javascript
　　jQuery Media Queries 插件
　　示例站点
　　你可以使用支持media query的浏览器访问下面的站点，例如：Firefox, Chrome, 和 Safari。可以查看他们针对浏览器宽度所做的布局响应。
　　1、新版淘宝首页
　　淘宝首页现在中间部分布局是：左中右，其中左边导航是固定宽度的，中间和右边使用了&media query&使得在不同分辨率下采用响应式布局，如下：
　　默认尺寸[1190px]：
　　中等尺寸[1009px]：
　　小尺寸[740px]：
　　2、Hicksdesign
　　大尺寸: 3 列sidebar
　　小尺寸: 2 列sidebar (中间的sidebar跑到了左边)
　　更小尺寸: 1 列sidebar (最右边的跑到了logo下面)
　　最小尺寸: 没有sidebar (logo 和 右侧的sidebar 上移，其他sidebar 下移)
　　3、Colly
　　页面布局根据浏览器的可视区域，在1列、2列和4列之间切换。
　　4、A List Apart
　　大尺寸：导航在上不部, 1行图片
　　中等尺寸：导航在左边, 3列图片
　　小尺寸：导航在上部，logo没有背景图片, 3列图片
　　5、Tee Gallery
　　他和之前的Colly有点像，不同点在于它的图片会根据页面布局的变化，进行缩放。这里使用的技巧就是，对图片使用百分比宽度，代替固定宽度，例如：width=100%。
　　总而言之，Media Query目前在移动端应用很多，虽然在PC端有些局限性，但以后是一个趋向，我们应该更多的去研究它，目的是让我们的项目拥有更好的用户体验。
　　我们需要注意到，针对mobile做了一个css，并不意味着我们的站点对mobile设备就是优化的。对mobile设备进行优化，网站图片和html代码同样需要缩小尺寸，这样才有益于加载。media query做到的只是设计展现，而不是优化操作。
　　最后只想说，一个好的产品，必须具备好的用户体验。更多精彩敬请关注Web前端之家:吧!
责任编辑：佩佩
延伸阅读：关键词：
站长杂谈 草根站长信息中心
兄弟网站：||||||
增值电信业务经营许可证： | 编辑热线：5 |
A5站长网 版权所有.网页上的摄影展:等高响应布局实现-腾讯ISUX – 社交用户体验设计 – Better Experience Through Design
「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。
回忆一下，Pinterest、Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？
那种感觉就像逛街，让所有商品呈现在网页上，只需要往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的宽度相等，但是高度不一。
这就是所谓的「等宽响应式瀑布流」，它的特点如下：
1.响应式，适应PC端以及移动端各设备呈现不同的宽度和单列数量；
2.等宽，这样的布局十分适合瀑布流，有不断向下的阅读感；
3.没有脚的小鸟，因为内容是不断向下加载，因此页脚基本是看不到了；
这样的布局引起了一个风潮，然而把图片适应到等宽，高度等比例变化，对不考虑容器高度的浏览来说实现并不难，因此业界也大多采用了这样的布局，而且可以响应式，在不同屏幕宽度可以变化不同卡片宽度。
然而，回归正题，今天要说的和这个不同，但是相近，它就是「等高响应式布局」。
先看看效果图：
如图，并不像等宽一样简单，要在不改变图片分辨率(宽高比)同时保持等高且占满行宽度，如何实现？不妨带着问题跟我走。
1 等高响应式布局是什么？
①行内高度相等；
②行间总宽度相等；
③自适应宽度布局；
④图片分辨率（宽高比）不变；
2 难在那里？
①行内高度一致，行间高度不一致，但是相差不能太多；
②并不知道一行需要多少个图片才能占满宽度，由于高度不确定，图片的宽度也不能等比变化；
③如何做到自适应？
④布局用于用户的个人相册，数据量是有限且未知的，如何保证图片数量满行显示？
由上可知，这种布局涉及太多变量，而且最难的是做到图片分辨率不改变，不影响图片质量效果。
该如下下手？我的思路是：确定一个变量，其他变量根据这个变量做适应性调整。
3 解决方法（具体下面会有图示）
①确定一个变量。由于当前的浏览器宽度是固定的，因此可以根据浏览器宽度范围制定一个标准高度，类似CSS的(media query)；
②初次变换。所有图片宽度根据这个标准高度作宽度的等比例缩放；
③创造容器。每行建立一个div，并装入尽可能多的图片，直到容器装不下；
④第一步调整。每行根据自己与目标宽度（当前浏览器宽度）的差值，再等比例变化宽、高。
公式如下：当前行总宽度/目标宽度=每个图片当前高度/变化后高度；
⑤第二步调整。根据变化后高度再等比变化各图片宽度；
4 操作图示
大工告成！然而深入考虑和分析，还总结出一些别的问题，我用了以下不同的处理方法把这些问题解决。
5 其他问题
①高度调整公式会产生百分比，浏览器是会直接取整，因此可能会产生-2到2px的误差；
解决方法：调整后记录每行误差值gap,然后循环把gap的值分给同行每一张图片，这样前2张图片可能会有±1px的图片宽度变化，但是用户基本觉察不了图片的轻微拉伸变化。
②用户图片数可能过少，会有图片只有1-3张占不满一行的情况，该怎样显示布局；
解决方法：判断只有1行图片的时候不作布局调整，少于1行则默认显示等高变化后的图片即可(即只调整一次，不需要为剩余值再自适应）。
③ 每行调整前的剩余宽度过大，导致调整后宽高很大；
解决方法：若调整后宽高是原始宽高的150%左右则该行舍弃，这里考虑到整体图片质量，确保不影响图片墙效果。
④ 用户上传的照片太小，例如16×16的小图标，如果一样的方式调整会与400×800这些图片并列放大，造成很大缩放比。
解决方法：考虑到是图片墙的效果，一般不会有用户传一些其他的图片，例如表情素材等等，同时在图片处理时可以加一个排序，获取了图片宽高后把小于一定值的图片排在最后再一起显示；
目前有2个网站已经初步实现这种效果，如百度图片和flickr，如下图：
然而，我们的布局有如下优势：
（1） flickr并没有兼容到ie6-7，可是由于我们的项目一般用户量比较大同时要考虑到所有用户，因此有必要做到兼容ie6以上所有浏览器包括各种现代浏览器；
（2） 百度其实并没有做到完美的满宽，如图右边，每行右边会出现不对齐，而我们的解决方案可以避免这样的误差(其他问题①)；
这个布局的优势显而易见：整齐又多变，规则又繁杂，用最纯粹的方式展现图片的魅力。
就如一个「网站版的摄影展」。
实现如此的方案，需要细心分析，仔细考虑，繁杂的效果只会降低图片的展现力，所以需要先做加法，丰富功能，再做减法，去其糟粕。
demo效果请。
这个布局将会用在QQ空间V8版本新摄影控版式，敬请期待。
友情链接：
Copyright &
All Rights Reservedie兼容响应式布局的实现总结
虽然说响应式设计的理想状态是，需对pc/移动各种终端进行响应；但是现实是高分辨率的pc端与手机终端屏幕相差太大，像电商这样有大量图片和文字
信息的同时排版要求精准的页面，设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战；同时高分辨率下pc页面信息量巨大，对于手机端用户是否需
要，也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大，这种多图多信息量要求精准的页面，设计出来恐怕会是2个完全不同的版本，也许
各自维护更方便。由于业务形态原因，随着用户分辨率的提高，已不再是主流，宽屏用户比例越来越大，因此我们的响应式考虑如何充分利用PC
用户设备上更多空间而设计。下图为淘宝用户的屏幕分辨率和浏览器比例，鉴于ie8-浏览器目前占比约70%，media
query的ie8-兼容迫于现实还是要做，泪……
media query简介
有2种引入方式：
1.link标签方式
"stylesheet" type="text/css"
media="screen" href="sans-serif.css"&
"stylesheet" type="text/css"
media="print" href="serif.css"&
&&* { font-family: sans-serif }
媒体类型有很多种：‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’,
‘screen’, ‘tty’, ‘tv’、‘embossed’、
‘speech’、’3d-glasses’，但最常用的是screen和print,对于前端们来讲最常用的应该只有screen了。应用于所有媒体类
型可以用all，省略不写默认就是all。media query支持很多表达式，常用的如下，：
all and (min-width: 400px) and (max-width: 700px) {
all and (orientation: portrait) {&
and (min-device-width: 800px) { }
利用media query可以轻松实现不同屏幕宽度时切换不同的页面布局，但是很不幸ie8及以下都还不支持media
query，于是开始了下面的media query兼容之旅……
目前实现media query ie兼容的库比较成熟的有和；，respond.js 压缩后1k，只实现了media
query中最常用的min-width
max-width的兼容；css3-mediaqueries-js基本实现了所有css3规范中的media
query特性的兼容，所以导致压缩有16k，测试反馈其性能远低于respond.不过确实一淘首页2次响应式设计均只需用到max-width
和min-width， 和
也均推荐使用respond.js,下面具体看看它们的实现吧
respond.js源码分析
官方demo地址：
1.在css中正常用 min/max-width media queries
&&&&@media
screen and (min-width: 480px){
&&&&&&&&...styles
and up go here
引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果
respond.js加载得很后面，这时重新根据media
query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）
1.把head中所有的css路径取出来放入数组
2.然后遍历数组一个个发ajax请求
3.ajax回调后仅分析response中的media
query的min-width和max-width语法，分析出viewport变化区间对应相应的css块
4.页面初始化时和window.resize时，根据当前viewport使用相应的css块。
window.matchMedia = window.matchMedia ||
(function(doc, undefined){
&&var bool,
&&&&&&docElem&
= doc.documentElement,
&&&&&&refNode&
= docElem.firstElementChild || docElem.firstChild,
fakeBody required for
&&&&&&fakeBody
= doc.createElement_x('body'),
&&&&&&div&&&&&
= doc.createElement_x('div');
&&div.id = 'mq-test-1';
&&div.style.cssText = "position:top:-100em";
&&fakeBody.style.background = "none";
&&fakeBody.appendChild(div);
&&return function(q){
&&&&div.innerHTML
&&&&docElem.insertBefore(fakeBody,
= div.offsetWidth == 42;
&&&&docElem.removeChild(fakeBody);
&&&&return
{ matches: bool, media: q };
})(document);
//检测是否支持media
query,检测css是否有效的方法都差不多，创建一个元素应用该css后检测元素宽度，然后清除该元素。
if( !!href &&
isCSS && !parsedSheets[ href ] ){
selectivizr exposes css through the rawCssText expando
(sheet.styleSheet &&
sheet.styleSheet.rawCssText) {
&&&&&&&&&&&&&&&&//sheet.styleSheet.rawCssText看不懂，原来是方便selectivizr和respond.js联用，
&&&&&&&&&&&&&&&&//selectivizr的作用是
CSS3 selectors for
IE；约定将原csstext放在styleSheet的link上的扩展属性rawCssText上；这里如果联用selectivizr可以少次ajax请求
&&&&&&&&translate(
sheet.styleSheet.rawCssText, href, media );
&&&&&&&&parsedSheets[
href ] = true;
&&&&&&&&if(
(!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)
&&&&&&&&&&&&||
href.replace( RegExp.$1, ""
).split( "/" )[0] ===
win.location.host ){
&&&&&&&&&&&&requestQueue.push(
&&&&&&&&&&&&&&&&href:
&&&&&&&&&&&&&&&&media:
&&&&&&&&&&&&}
其余的代码就是ajax实现和translate media query的max-width
min-width的逻辑了；可以看出这里必须依赖ajax请求css路径才能得到css文件中的mediaquery的内容，那ajax的跨域问题就要
解决了；由于我们的静态资源都是要放cdn的，respond.js也给出了跨域方法，即引入代理页面。
//把cross-domain/respond-proxy.html
//把cross-domain/respond.proxy.gif
放到当前域服务器上
id="respond-proxy" rel="respond-proxy" /&
"/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /&
"/path/to/respond.proxy.js"&
这里ajax跨域实现是通过代理页面将获取到的css，再通过window.name通信实现；如在respond.proxy.js中
function checkFrameName() {
&&&&&&&&cssText
= iframe.contentWindow.
&&&&&&&&&&&&&&&&var
now = new Date().getTime(),useTime = now - initT
&&&&&&&&alert('获取css耗时:'+
useTime + 'ms');
(cssText) {
&&&&&&&&……//销毁之前用于通信的iframe,后续回调callback
&&&&&&&&callback(cssText);
&&&&&&&&win.setTimeout(checkFrameName,
win.setTimeout(checkFrameName, 500);//500ms后确认内部iframe的name值是否传递过来，后续再更新当前viewport该用的css。
因为实现跨域代理的问题，初始化页面时应用上全部css耗时较长，以下光测试从开始执行该js文件到css取回调用之前的耗时为500ms-515ms之间（每次刷新结果不一样），ie8下测试结果如下
测试结果发现，刷新页面后会有明显的闪屏（以该测试demo为例，一开始页面背景是黑色的，这是默认css中的，跨域js执行完成后分析出
query中的该viewport尺寸下应该应用red的背景，所以又变成红色），间隔时间为500ms以上。所以体验不是很好，而且该场景中ajax跨
域目前已经没有更好的实现方式，500ms间隔的闪屏避免不了。
同时因为是ajax请求css,所以会因为响应式而额外产生一个请求，好在之前css请求过一遍，这次ajax请求是读取浏览器缓存中的，如下图中fiddler的检测结果中的第三个请求和第六个请求：
respond.js总结
优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用
缺点：仅支持media
query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。
css3-mediaqueries-js源码分析
官方文档和demo都没有，相对于respond.js
css3-mediaqueries-js支持几乎所有的media query的语法，访问
其实现逻辑和respond.js差不多，只是更加支持的media
query更加全面，同时支持内联style，支持各种宽度单位(em|ex|px|in|cm|mm|pt|pc),但是这里的初始化是在
domready后执行，为了让用户感觉不出页面有闪屏（之前应用初始化样式然后js提取media
query中的样式再覆盖一遍）现象，这里的实现是先将html移出可视区域外，等解析完media
query后再重置回来，但实际目测感觉稍有闪屏（当然这里的测试是测试body背景色，移出可视区域外不管用，当然绝大部分响应式场景是适用的），实现
prevent jumping of layout by hiding everything before
painting 先将html移出可视区域外
var docEl =
document.documentE
&&&&docEl.style.marginLeft
= '-32767px';
make sure it comes back after a while 异常处理，万一获取mediaquery
css失败，重置回来
setTimeout(function ()
&&docEl.style.marginTop = '';
// return visibility after media queries are tested
生效后重新可见
cssHelper.addListener('cssMediaQueriesTested', function
force repaint in IE by changing width
&&&&&&&&docEl.style.width
&&&&setTimeout(function
&&&&&&&&docEl.style.width
= ''; // undo
&&&&&&&&docEl.style.marginLeft
= ''; // undo
&&&&&&&&var
now = new Date().getTime();
&&&&&&&&var
useTime = now - initT
&&&&&&&&alert('media
query生效时间:'+useTime+'ms');
remove this listener to prevent following execution
&&&&cssHelper.removeListener('cssMediaQueriesTested',
arguments.callee);
其余实现和respond.js基本一致，也需要使用ajax，所以css3-media-queries.js本身不支持跨域，当然非要支持跨域
也可以，也可以像respond.js一样使用代理页面跨域即可，但也会出现闪屏的现象。还是先看看不跨域情况下，大多数人为什么选择
respond.js，主要原因还是完美支持的media
query特性导致压缩后16K，下载和执行时间都逊于respond.js，下面是同域下在ie8的测试结果（耗时140ms而respond.js仅
css3-mediaqueries-js总结
优点：1、基本支持所有css3中的media query语法
缺点：1、不支持跨域（如cdn），就算支持了跨域也存在闪屏现象；2、和respond.js对比性能较差
全局切换class
因为css/js需要放到cdn上面，需要跨域，css3-mediaqueries-js不支持跨域，respond.js支持跨域但是实现跨域
后性能较差，有闪屏体验也差，而且配置麻烦，不方便各个业务通用。对比respond.js和css3-mediaqueries-js可知，实现响应式
应用min-width和max-width足矣；同时模拟media
query的效果只需要在2个关键时间点根据viewport切换css（初始化页面时和window.resize）即可。所以可以选择切换css
link，可以动态切换css块,也可以切换class
link（优点：逻辑清晰；缺点：增加请求数，维护麻烦，如修改一个模块涉及到3个尺寸的响应,至少需要改3个文件）
"stylesheet" type="text/css"
media="screen
and (max-width: 990px)" href="respond750.css&&
stylesheet"
type="text/css" media="screen and
(max-width: 1200px)"
href="respond990.css"&
切换内联css块(respond.js和css3-mediaqueries-js就是通过js分析出media
query然后自动根据当前viewport切换css块，这个理想环境下是最好的，自动分析只管写media
query，但是依赖ajax获取css内容，跨域实现成本高体验也不好)
全局切换class(特别是初始化页面时最好在页面内容未开始渲染之前切换class，不然会出现像在宽屏时刷新效果，刷新时内容由中间向外偏），特定viewport用特殊全局class标记，响应式样式继承在该class下，实现大致如下：
screen and (min-width: 990px) {
&&&.content
&&&&&&width:
&&&&&&color:
screen and (min-width: 1200px) {
&&&.content
&&&&&&width:
&&&&&&color:
.w990 .content {
&&width: 990
.w1200 .content {
&&width: 1200
"content"&content
全局切换class这种方式维护也是个问题，首先是js分散2处，body最上方切换全局class，domready时
window.resize时切换class,同时响应式尺寸增加时，需要改变js判断条件；再看css的维护，media
query一份，加全局class一份相同的，维护需要同时修改2次，初期media query几十行也能接受，但是后来改版media
query几百行，这样维护成本就大大增加了，全局class和media query
copy相同的代码引入less解决，使用方法如下：
#channels {
&&.w1200()
&&&&.etao-channels
&&&&&&padding:
170px 0 0 30px;
&&&&&&&&margin-right:
&&&&.etao-channels
&&&&&&padding:
25px 0 0 15px;
&&&&&&&&margin-right:
&&&&.etao-channels
&&&&&&padding:
&&&&&&&&margin-right:
&&&&&&&&color:
这样只需维护上面一处代码即可
#channels & .w1200;
@media (max-width:
&&#channels
@media (max-width:
&&#channels
&&#channels
&&#channels
目前采用以上方法维护，支持1200px、990px、750px三个尺寸的响应，不得不承认维护成本还是偏高，欢迎各种改进建议,
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。你的位置： >
> 响应式布局是与非
响应式布局是，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！
Responsive Web Design可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。
最灵活的（Mostly Fluid）
最受欢迎的模式或者就是这种最简单的方式：在更大屏幕使用更大margin的多列布局，依赖于灵活的栅格和图片，在小屏幕中某列内容往下排。
我把这种模式列为“最灵活”，是因为在很多尺寸的屏幕中，主要布局结构并没有很大改变，直到在很小的屏幕当中。这个设计依赖于灵活的栅格来适应不同的屏幕尺寸。下面是几个使用这种模式的网站示例。
当然这几个例子有不同的地方：元素移动的方式不同、屏幕尺寸划分的不同等，但是大体上，这种模式有着很多的相似之处。
列内容往下排（Column Drop）
另一种模式以多列开始，以单列结束，当屏幕尺寸变小，列内容会往下排。不像第一种模式，这种模式的元素大小基本保持不变。
各列内容在分辨率临界点有怎样的变化，何时变化和如何变化，取决于每个不同设计。但是大体上，在窄屏幕中，导航或者主要内容是放在顶部的。以下是这种模式的几个例子：
布局切换（Layout Shifter）
这种模式尽最大可能地去适应不同的屏幕尺寸。即是，不同的布局应用于的大、中、小屏幕当中。因为这本来就花费更多的工作量，所以相比前面两种模式，这个的受欢迎程度稍低。
基于所见的最常见的网站例子，虽然我把这种模式笼统地括入以上的插图，但事实上这种模式是很多创新产生的地方。所以，没有哪种固定格式可以概括所有这种模式的设计。看看以下几个例子：
最简单（Tiny Tweaks）
这是最简单的模式，所以也是不常用的模式。大概是因为很少公司会有这么简单的网页，内容少并且是单列布局。对于使用这种模式的网站，多设备适应也仅仅是一些关于文本和图片的简单的变化，
插图看起来不是那么有说服力，所以，直接看例子吧：
屏幕以外的空间利用（Off Canvas）
虽然以上列了几种不同的模式，但是它们之间还是有相同的地方。它们都会在小屏幕当中，把内容往下掉，结果是页面很长，包含很多的内容模块。另外可能不太明显的一点，是它们同样地依赖屏幕的空间以调整页面布局。
但是你可能会疑问，这不就是我们的目的吗？这只不过是，我们把思想局限在了可视的范围内。实际上，屏幕外的空间总是比屏幕上的空间大得多。好好利用吧！
就如上图所示，Off Canvas模式利用了屏幕外的空间，它把内容或导航隐藏在这里，直到在大屏幕显示或者在小屏幕用户展开它。这种模式出现在一些移动网站和原生的移动App当中。
Facebook的移动Web利用了左边的空间，把导航选项隐藏在这里，直到有人点击链接展开它。在这时候，屏幕外的内容就展示在屏幕当中。有些响应式设计采用了相似的方法，但是其中有些遇到了可访问方面的。
Path的原生移动App采用了一种分层技术来创建Off Canvas效果。这个App利用了屏幕的左边和右边来导航。
Tokil Jahnsen创建了
，模仿了Path的设计。
Google 的移动版本利用了上面的部分，把导航信息隐藏在此。当用户点击“more”的时候，这些选项从上面滑动到可视区域。
Off Canvas 模式的大体思想是，在小屏幕， 除非被点击 ，附加的元素是被隐藏的。随着屏幕变大，可视部分越来越多，直至没有需要展开的元素。如果有人有兴趣用响应式设计思想创建这种模式的网站， !
我觉得Off Canvas 模式比较有意思，因为它避免用户在小屏幕中滚动屏幕和导航。它把网页的区块进行分离、分标签、按需出现。
原文：，作者是
译文：，译者是
响应式布局现在看来做前端的同学都要开始更深入的研究了吧。但在一些情况下也有不响应的理由。
4个理由不响应
1。响应设计，增加了开发时间超过预算
想想原本做前端开发苦逼的工程师就要兼容多浏览器的兼容，还要和ie斗个你死我活的，现在又要兼容多平台。要知道相同系统下的，不同浏览器显示效果不一样、要知道不同系统下的，相同浏览器显示效果不一样、要知道不同系统下的，同样的浏览器显示效果不一样，要知道不同系统下的，不同浏览器显示效果根本不可能一样。现在好了多了一分辨率这个变量。那工作量和成本是不是成阶增长的，我想只有你自己才知道了。
2。移动用户的需求和桌面用户不同
在大多数情况下，一个移动端的网站展示内容，往往仅仅是压缩它的桌面对应版本。这样就造成了一个问题,内容不变，但区域小了。大量的内容挤进一个很小的容器页，当然这些内容是可以垂直向下显示的。但大量的信息，并不是移动用户所必须的，他们没有时间来查看这堆信息。就像人们更喜欢在移动端使用微博而不是使用博客一个道理。
3。响应网站的可用性变差
差的可用性可能说的又点主观，但确实有类似的实例。
很多时候我想查用ipod看自己博客的时候，都会先进入移动版，但我很快发现，移动版里有很多信息不能直观的看到。然后我会很快的切换到桌面版。因为一样大小的页面显示更多的信息，并且方便放大缩小的操作也很方便，这些已经让移动版的简洁显得并不那么重要了。顺便吐下槽，ipod丢了3个多月了。呜呜….
4。响应网站往往有不必要的加载时间。
响应式设计一个目前的实现趋势是，工程师往往隐藏页面的元素使页面内容减小，以达到减少内容的目的，但这样做并不是最好的方法，隐藏的图像仍然加载，桌面版本的所有脚本也都会加载，加载的文件大小和时间并不减少，但可视的内容却少了。这样算是不是很不划算那。而且国内的3G流量费用贵的吓死人，看个网站就把流量用光了，不知道用户会选择选择更高的套餐来使用你的网站那，还是选择不使用的网站那。我想结果显然易见。
任何事没有绝对的对与错，技术也一样，从不同的角度看就有不一样的结果。做的越多也就错的越多。这也是一个不争的事实。在这个过程中，前端开发的朋友们，还是要根据公司的要求来自行决定布局的选取才是关键。我是支持响应式设计的，但同样认为它有一些弊端和实际应用的问题，也些问题也阻止了响应式布局在这些项目上的应用。最后送一句话，用不用你说的算。好不好，客户说的算。
twitter的响应式开源库：/bootstrap/
各种bootstrap的风格： /
bootstrap的样式定制：/
jQuery Masonry开源库：/
Iostop库：http://isotope.metafizzy.co/index.
转载请注明： &
与本文相关的文章