响应式布局核心知识梳理

实际开发中

往往会遇到“写一套样式，让页面在 pc 端、移动端都能很好展示”

这样的需求，“使用媒体查询，实现响应式布局”就是实现该需求一种很好的方案。

响应式布局就是利用媒体查询技术，让页面在不同的屏幕上采用不同的样式，从而让页面能够兼容多种终端设备，比如 pc 端、手机端、ipad 等。

1、媒体查询

名称	描述
定义	针对各种大小的屏幕写样式，让页面在不同大小的屏幕上都能正常显示
实现	对不同的屏幕尺寸（大小）做出响应，并进行相应布局的一种移动 web 开发方式； 可以使用媒体查询设置断点，响应不同尺寸的屏幕； 一个网站兼容多种终端； 在不同的断点下设置不同的样式。
语法	@media 媒体类型 查询逻辑 (媒体特性：断点) { 具体样式 } 事例：@media screen and (min-width: 320px)
名词解释	media 是关键字；媒体类型是：screen 屏幕；min-width 最小宽度； 320px 是断点。 代码意思是：屏幕设备并且屏幕宽度>=320px（断点 Breakpoint）

2、媒体类型

作用

设置样式在什么样的设备下生效

种类	描述
all	所有设备（默认值）
screen	屏幕设备（最常使用值）
pint	打印设备
speech	屏幕阅读器，一般供残障人士使用

// 事例
@media screen ... {
  /* 具体样式 */
}
@media all(all可以省略) ... {
  /* 具体样式 */
}
@media pint ... {
  /* 具体样式 */
}
@media speech ... {
  /* 具体样式 */
}

3、查询逻辑

作用

连接查询条件，设置各个条件之间的逻辑关系

名称	描述
and （与）	查询条件全部为真时生效 注：如果只有一个条件，则不能写 and。是错误语法
, （或）	查询条件中的任意一个为真时生效 注： 逗号 “,” 前后的条件中，如果媒体类型是“all”可以省略
非（not）	对查询条件取反

（1）and（与）

/* 设备是 “屏幕设备”，并且屏幕宽度>=320时，作用以下样式 */
@media screen and (min-width: 320px) {
  body {
    background: skyblue;
  }
}
/* 注：如果只有一个条件，则不能写 and。直接删除and即可 */
@media (min-width: 320px) {
  body {
    background: yellow;
  }
}

多条件之间用 and 连接即可

/* 当设备是“屏幕设备”，并且宽度>=320px 且 <=375px 时，应该样式*/
@media screen and (min-width: 320px) and (max-width: 375) {
  body {
    background: pink;
  }
}

（2）, （或）

/* 
当“设备是“屏幕设备”并且宽度>=1000px” 或者 “设备是“屏幕设备”并且宽度 <=320px 时”，应用样式 */
@media screen and (min-width: 1000px), screen and (max-width: 320px) {
  body {
    background: blue;
  }
}

（3）not （非）

TIP

当 not 和 and 一起出现时，并且没有其他查询逻辑，则 not 是对整个条件取反

/* 当设备不是“宽度大于等于320且小于等于375的屏幕设备”时，应用样式 */
@media not screen and (min-width: 320px) and (max-width: 375px) {
  body {
    background: skyblue;
  }
}

4、媒体特性

TIP

设置媒体查询的条件

常用值	描述
width	宽度 @media screen and (width : ...) { }
max-width	最大宽度 @media screen and (max-width : ...) { }
min-width	最小宽度 @media screen and (min-width : ...) { }
-webkit-device-pixel-ratio	设备像素比
-webkit-max-device-pixel-ratio	最大设备像素比
-webkit-min-device-pixel-ratio	最小设备像素比
orientation	屏幕方向 @media screen and (orientation: landscape { 横屏下的样式 } @media screen and (orientation: portrait) { 竖屏下的样式 }

5、断点

作用

设置样式改变时的临界值（交界点）

@media screen and (width: 断点) {
}

根据行业经验总结约定俗成的常见断点

xs：<576px 超小屏

sm：576~768px 小屏

md：768px~992px 中屏

lg：992px~1200px 大屏

xl：>=1200px 超大屏

改变屏幕大小，当页面显示不正常（或不符合要求）时，将当前宽度设置成断点

6、媒体查询的书写位置

推荐

1、写在 style 标签中 （推荐写法）

2、写在单独的 css 文件中（推荐）

3、其他方式不推荐

7、媒体查询的策略

策略

• 无策略： 根据断点写媒体查询，每一个媒体查询可以使用 max-width、min-width，将样式限定在特定的宽度内即可。
• PC 端优先： 先考虑大屏，再考虑小屏；只需要使用 max-width 即可
• 移动端优先： 先考虑最小屏，再考虑大屏；只需要使用 min-width 即可