# 响应式布局核心知识梳理

实际开发中

往往会遇到“写一套样式,让页面在 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 即可
上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X