媒体查询

媒体设备

  • all所有类型的设备
  • screen彩屏设备
  • handheld 手持设备
  • print 打印预览
  • braille 盲文触觉设备
  • speech 屏幕阅读器
  • tv 电视类设备

关键词

  • and - 和，在多个条件的时候，可以用 and 连接，表示条件都满足才加载样式

    1
    2
    3
    4
    5
    @media screen and (max-width: 1000px) and (orientation: portrait) {
      div {

      }
    }

  • not - 不，表示只要不是某一个条件的情况下，其他条件都可以加载样式

    1
    2
    3
    4
    5
    @media not screen and (min-width: 1000px) {
      div {

      }
    }

  • only - 只有，表示只有在某个条件下，才可以加载样式

    1
    2
    3
    4
    5
    @media only screen and (orientation: landscape) {
      div {

      }
    }

  • , - 或，表示只要满足其中一个条件，就可以加载样式

    1
    2
    3
    4
    5
    @media (min-width: 1000px) , (max-width: 500px) {
      div {

      }
    }

媒体特征

  • 宽度
    • min / max - width 最小 / 最大宽度
    • min / max - device-width 设备最小 / 最大宽度
  • 横竖屏
    • orientation
      • portrait 竖屏
      • landscape 横屏
  • 像素比
    • -webkit-min-device-pixel-ratio: 2

引用方式

  • 通过 link 设定条件引用

    1
    <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 1000px)">

  • 通过 import 设定条件引用

    1
    @import url('style.css') all and (min-width: 600px);

  • 直接在写样式的时候设定条件

    1
    2
    3
    @media screen and (min-width: 600px) {

    }

开发技巧

根据分辨率不同设置留白

这里的不同分辨率设备，其实我们有一个比较通用的，分为大屏、中等屏幕、小屏幕、超小屏

屏幕尺寸

大屏 中等屏 小屏幕 超小屏
对应设备 大屏显示器 笔记本显示屏 ipad 手机
对应尺寸 >=1200px >=992px >=768px <768px
显示尺寸 1170px 970px 750px auto

基于小屏开发

从大屏开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
  width: 1170px;
  height: 80px;
  background: pink;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  div {
    width: 970px;
  }
}
@media screen and (max-width: 992px) {
  div {
    width: 750px;
  }
}
@media screen and (max-width: 768px) {
  div {
    width: 100%;
  }
}

从小屏开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
  width: 100%;
  height: 80px;
  background: pink;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  div {
    width: 750px;
  }
}
@media screen and (min-width: 992px) {
  div {
    width: 970px;
  }
}
@media screen and (min-width: 1200px) {
  div {
    width: 1170px;
  }
}
  • 从小屏开始的话，更亲和移动端，而且大屏幕下肯定是永远能显示小屏幕的内容的，不会出现内容超出的问题
  • 但是实际开发中，大屏幕开始会更简单一点，因为页面中不是所有的内容都需要显示，如果先写小屏幕，大屏幕在变化的时候，需要增加结构，很容易出现问题

左右布局变成上下布局

利用宽度，当父级宽度不够显示元素的时候，元素自然会掉下去

栅格布局

  • 容器
    • container 固定宽度容器
    • container-fluid 自适应宽度容器
  • 行
    • row
    • 为什么列必须放在行内？
      • 清除 浮动
      • 清除 container 上的 padding
  • 列
    • col-xx-n
      • xx 尺寸
      • n 占用位置
  • 列嵌套
  • 列偏移
    • col-xx-offset-n
      利用 margin，让元素向后位移
  • 列排序
    • col-xx-push-n 推
    • col-xx-pull-n 拉
      利用 推 和 拉 交换位置

兼容方式

@media是 css3 新增样式，兼容到 IE9+，低版本浏览器需要引用两个文件

1
2
3
4
<!-- 用 JS 创建 H5标签，让低版本浏览器支持 -->
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<!-- 支持响应，利用 JS 判断 屏幕尺寸 是否发生变化 -->
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

Bootstrap 4.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 兼容 >IE10、>ios7 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Bootstrap 3 兼容 >=IE8、>=ios6 -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- popper -->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  • integrity=”文件指纹”

    Web安全方面，涉及到劫持、xss攻击等

  • crossorigin=”anonymous”

    对此元素的CROS请求不设置凭据标志（不携带信息）

条件注释主要用于处理 IE 兼容问题，针对 IE5 ~ IE9 的版本有效

  • 基本语法

    1
    <!--[if IE]> html代码 <![endif]-->

  • 指定版本

    1
    <!--[if IE 6]> html代码 <![endif]-->

  • 指定版本范围

    1
    <!--[if lt IE 8]> html代码 <![endif]-->
    • lt 小于
    • gt 大于
    • lte 小于等于
    • gte 大于等于

盒模型

所有的盒模型都是怪异盒模型box-sizing: border-box;

flex 布局

超小屏 小屏 中等 大屏 超大屏
变化尺寸 >576px >=576px >=768px >=992px >=1200px
布局尺寸 auto 540px 720px 960px 1140px
前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 行 */
.row {
  /* 兼容 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox; /* 支持 IE 11 */
  display: flex;

  /* 换行 */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  /* 抵消布局容器设置的 padding */
  margin-right: -15px;
  margin-left: -15px;
}

/* 列 */
.col {
  -webkit-box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
}

/* 列偏移 */
.offset-1 {
  margin-left: 8.333333%;
}

/* 列排序 */
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}