04 响应式

一、是什么

     不同的浏览器尺寸，不同的排版（舒服美观为主）

 

二、媒体查询

     1、媒体类型

          all             所有

          screen     电脑或手机

          print        打印设备

          speech    听觉类似的媒体类型

@media screen{
    .box{
        ...... 
     }
}
==========================
@media only screen{}                 only 表示在特定媒体下识别
 
=========================
@media all and (min-width: 500px){}  and 表示连接媒体类型和媒体设备条件
 
=========================
/*以下不是最好的方法，因为其原理是检测屏幕可视区的宽高比例，从而检测屏幕垂直或者水平。bug: 弹出软键盘时，屏幕可视区宽高比例变化，可能导致检测有误*/
@media (orientation:portrait){}      屏幕垂直
 
@media (orientation:landscape){}     屏幕水平

 

     2、特点

          2.1 媒体有覆盖性（当width: 1200px 时，符合下面两个条件，但是靠媒体样式的覆盖性，所以会采用第二个样式）

@media all and(min-width: 500px){
    .box{
         width: 50%;
     }
}
@media all and(min-width: 1000px){
    .box{
         width: 33.333%;
     }
}

          2.2 媒体查询代码写在样式后半部分，因为覆盖性

 

     3、响应式样式位置

          3.1 样式表的后半部分

          3.2 link标签引入（注意顺序，因为覆盖性）

<link rel="stylesheet" href="01.css" media="all and(min-width: 500px)" >

          3.3 样式表头部用import引入

@import url(01.css) (min-width:400px);

  

三、Bootstrap

     1、使用: 引入js文件，用class的方式使用

     2、栅（shan）格系统：将页面均分为最多12列

          2.1 布局容器

               .container     固定宽度 

               .container-fluid     100%宽

          2.2 .row

          2.3 .column     只有 .column 可以作为 .row 的直接子元素

               2.3.1     设置响应式列布局

                    col-lg     大屏幕、大桌面显示器（>=1200px）

                    col-md     中等屏幕、桌面显示器（>=992px）

                    col-sm     小屏幕、平板（>=768px）

                    col-xs     超小屏幕、手机（<768px）

<div class="container-fluid">
    <div class="row">
         <div class="col-lg-1 col-md-2 col-sm-4"></div>     //响应式：共12列，当超大屏幕时，每列1div；当中等屏幕时，每2列1div......
         <div class="col-lg-1 col-md-2 col-sm-4"></div>
         <div class="col-lg-1 col-md-2 col-sm-4"></div>
         /* 共12行 */
    </div>
</div>

               2.3.2     设置列偏移（右偏移）     col-md-offset-n

               2.3.3     设置列排序（向右推n格 | 往右拉n格）     col-md-push-n     col-md-pull-n

               2.3.4     其他响应式工具

                    visible-xs      超小屏幕显示    

                    hidden-xs     超小屏幕隐藏