标签：
现在响应式布局用得比较大众的应该是Bootstrap，但是我并不打算使用。原因很简单，我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单，就是使用到了CSS3中的media。media何方神圣？可以用来吃吗？它可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。既然如此，响应式何愁。
Max Width：在可视区域的宽度小于 600px 的时候被应用。
@media screen and (max-width: 600px) { .class { background: #0094ff; } }
Min Width：在可视区域的宽度大于600px 的时候被应用。
@media screen and (min-width: 600px) { .class { background: red; } }
简单？对，就是如此简单。您还可以 在600到900直接的启用。
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #0094ff; } }
当然，您还可以，放入单独文件。爽歪歪了吧。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" />
默认样式 显示 移动端：
.blog_body_e.col-xs-12 .a_blog_user { display: inline-block; } .blog_body_e, .blog_body_b { padding-left: 10px; padding-right: 10px; }
如果是PC端：（默认 大于992px就算是PC端 当然，你也可以自定义）
@media (min-width: 992px) { .blog_body_e.col-md-3 .a_blog_user { display: block; } .blog_body .blog_body_b { width: 80%; float: left; } .blog_body .blog_body_e { width: 20%; float: left; box-sizing: border-box; padding-right: 25px; } .blog_body_e, .blog_body_b { padding-left: 20px; padding-right: 20px; } }
标签：
原文地址：http://www.cnblogs.com/qigege/p/4825282.html
