04 响应式

媒体查询与Bootstrap布局

最新推荐文章于 2025-05-12 13:02:55 发布

转载最新推荐文章于 2025-05-12 13:02:55 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hihao/p/7421921.html

一、是什么

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

二、媒体查询

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 超小屏幕隐藏

转载于:https://www.cnblogs.com/hihao/p/7421921.html