《响应式Web设计：HTML5和CSS3实战》
移动优先的跨终端 Web 天猫 前端 @徐凯-鬼道 W3CTECH 2013 http://luics.com/demo/cew-w3ctech-1311/#/
响应式布局 设计思想 概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端??而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点和缺点
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
根据不同的宽度进行识别,css3 media, 字体rem 按照根元素进行放大,避免css sprite按钮等,不然要使用图片缩放进行设置
设计思想
mobile frist ( 移动优先)
A级必须兼容, 简单来说比较普遍是 最低兼容 480 768 1024 这三个分别率,现在还有 1280 1960 等等级别要考虑(4k等等还是需要media进行选择
media ie8-6不支持可以使用respond令到其支持,不过 不需要(ie8以下就给他使用默认css,不必太友善对待,必须要兼容可以考虑使用Respond.js
内容优先 是 响应式的第二个思想,让主体内容首先显示,还有是对应部分次要模块进行修正排版显示在后面。
例子就看我博客就可以了！（改版之后再说）
1200-1920（固定1200）（主要桌面级 对于4k设备暂时还未考虑）
1200-1024（固定1000）（旧pc和平板）（ie6-8不支持响应式也默认这个宽度，然而对应太过老旧的东西我个人是不想做的）
768（768-1000）（宽99%）（个人确实不喜欢满屏）
上面只是兼容 完全无说到内容优先吧客官稍慢，现在上菜
480-768 对应左右模块放在一起显得会太过紧凑，针对移动设备 把主题内容优先，所以文章列表在上面 日期公告就被我放置在列表到下面，（其实思想就是这么简单）
简单的响应式布局
根据宽度来变颜色
Responsive Design
.content{
color: #123;
border: 1px solid #123;
width:98%;
margin: 0 auto;
}
@media screen and (max-width:1024px){
.content{
color: orange;
border: 1px solid orange;
width:95%;
}
}
@media screen and (max-width: 768px){
.content{
color: red;
border: 1px solid red;
width:98%;
}
}
@media screen and (max-width: 480px){
.content{
color: green;
border: 1px solid green;
width: 95%;
}
}
宽度
查看更多关于初探响应式Web设计_html/css_WEB-ITnose的详细内容...