移动端之响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

所以在页面布局较为简单，内容偏少时可以使用响应式布局，而不用为每一个终端做一个页面。

1.布局

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分如：

 *{
            margin: 0;
            padding: 0;
        }
        @media screen and ( max-width : 768px) {
            .box{
                width : 100%;
                background-color: red;
            }
        }
        @media screen and (min-width:769px) and (max-width:992px){
            .box{
                width: 750px;
                margin: 0 auto;
                background-color: aqua;
            }
        }
        @media screen and (min-width:993px) and (max-width:1200px){
            .box{
                width: 970px;
                margin: 0 auto;
                background-color: green;
            }
        }
        @media screen and (min-width:1201px){
            .box{
                width: 1170px;
                margin: 0 auto;
                background-color: pink;
            }
        }

如果不想自己去设置，那我们可以去使用Bootstrap这个框架。

2.Bootstrap

Bootstrap 用于开发响应式布局、移动设备优先的 WEB 项目。
可以直接使用 Bootstrap 提供的 CSS 样式表，直接往想加的标签中加类名即可。里面还有很多组件，都可以使用。

Bootstrap中对于响应式开发最方便的便是他的 栅格系统。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

2.1 .container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

2.2.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

加了这俩个类名之一后，该容器就会根据屏幕进行变化

3.3栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.通过“行（row）”在水平方向创建一组“列（column）”。
3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6.负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

3.4列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

3.5隐藏页面

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

里面还有很多很多就不一一介绍了，大家可以自己去官网查看学习。