响应式布局简介

1.什么是响应式布局？

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。--来源百度百科

 参考网址  http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html

2.怎样实现响应式布局

现在响应式布局用得比较大众的应该是Bootstrap，但是我并不打算使用。原因很简单，我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单，就是使用到了CSS3中的media。media何方神圣？可以用来吃吗？它可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。既然如此，响应式何愁。

3.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;
    }
}

 

转载于:https://www.cnblogs.com/qigege/p/4825282.html