最近需要写一个既适应pc端 又适应手机端  ，最重要的是还要支持手机横屏！！！

所以用到了布局神器-----bootstrap 栅格系统

先放效果图：

pc端：

手机端：

手机端横屏：

首先：在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

然后：

我的需要适应pc、手机、以及横屏，所以类名这里是这样写的：

<div class="row icon-title">
    <div class="col-xs-0 col-sm-2 col-md-2"></div>
    <div class="col-xs-12 col-sm-10 col-md-9 div-logo">
        <img src="../images/logo.jpg"/>
    </div>
    <div class="col-xs-0 col-sm-0 col-md-1"></div>
</div>

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（row）

解释：

col-xs-     对应超小设备（屏幕<768 px ）手机

col-sm-    对应小型设备（屏幕>768 px 屏幕<992 px ）平板电脑

col-md-   对应中型设备（屏幕>992 px 屏幕<1200 px ）台式电脑

col-lg-     对应大型设备（屏幕>1200 px）台式电脑

1、col-xs-12就是在屏幕小于768px时，图片会在横向上充满，占据整个div

2、在col-xs-0 col-sm-2 col-md-2 这个div內，我什么都没写，但是在屏幕大于768px的时候，这个div会占据一部分大小。可以理解为就是一个有一定大小的空的div（就是用来占位置的）

3、因为既要适应手机端，还有电脑端，就把这几个类名都写在一起，在屏幕大小改变的时候，会自动调到对应的样式

栅格最最最最核心！！！！

@media

@media screen and (max-width: 992px) and (min-width: 768px) {
    .radioC label{
       background-color:#f00
    }
}

上面这段代码的意思就是当屏幕大小在992px - 768px之间时，label标签的背景色为红色。

col-xs- 、col-sm- 、 col-md-......这些类名背后对应的样式就是通过@media来实现的！！！！！