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     超小屏幕隐藏
          
 
 
 
 
 
posted @ 2017-08-24 10:56  HelenJ  阅读(304)  评论(0编辑  收藏  举报