css 响应式布局

响应式布局概念

• 指网页能自动识别屏幕宽度，并做出相应调整的网页设计。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验

媒体查询语法

基本语法

媒体类型（Media types）

描述设备的一般类型

• all 适用于所有设备
• print 适用于在打印预览模式
• screen 主要用于屏幕
• speech 主要用于语言合成器

媒体特性（Media features）

描述了 user agent、输出设备，或是浏览环境的具体特征

• width 视窗 viewpoint 的宽度
• height 视窗 viewpoint 的高度
• aspect-ratio 视窗 viewpoint 的宽高比
• orientation 视窗 viewpoint 的旋转方向
• ...

逻辑操作符（logical operation）

not,and 和 only 可用于联合构造复杂的媒体查询

• and 用于将多个媒体查询规则组合成单条媒体查询
• not 用于否定媒体查询，如果不满足这个条件则返回 true, 否则返回 false
• only 用于旧版浏览器识别媒体类型使用
• 逗号，用于将多个媒体查询合并为一个规则

link 标签方式

通过 media 属性设置媒体查询类型和媒体特性

<link rel="stylesheet" href="a.css" media="(orientation:portrait)">
<link rel="stylesheet" href="b.css" media="(orientation:landscape)">

媒体查询规则

编写位置及顺序

• 添加到样式表的底部，对 css 进行优先级的覆盖
• 移动端 -> PC 端的适配原则： min-width 从小到大
• PC 端 -> 移动端的适配原则： max-width 从大到小

/* 后面的覆盖前面的 */
.box1 {
  background-color: blue;
}

@media (min-width: 700px) {
  .box1 {
    background-color: pink;
  }
}

/* 移动端优先时，min-width 顺序：从小到大 */
.box2 {
  background-color: blue;
}

@media (min-width: 700px) {
  .box1 {
    background-color: pink;
  }
}

@media (min-width: 100px) {
  .box1 {
    background-color: green;
  }
}

/* PC 端优先时，max-width 顺序：从大到小 */
.box3 {
  background-color: blue;
}

@media (max-width: 1000px) {
  .box1 {
    background-color: pink;
  }
}

@media (max-width: 700px) {
  .box1 {
    background-color: green;
  }
}

响应式断点（阈值）设定

一般推荐的

• Extra small < 576px
• Small >= 576px ,-sm
• Medium >= 768px ,-md
• Large >= 992px ,-lg
• X-Large >= 1200px ,-xl
• XX-Large >= 1400px ,-xxl

.d-none {
  display: none;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none;
  }
}

/*...*/

响应式栅格系统

• 栅格布局 + 断点设定

响应式交互实现

一般两种方式

• 利用 :checked 伪类
• 利用 JavaScript 脚本