在网站中使用媒体查询的趣味百科

2023-01-18 20:09:17

利用 CSS 媒体查询应对多屏时代的网站布局挑战

简介

随着智能手机、平板电脑和智能电视等设备的普及，互联网不再局限于台式机。不同的设备拥有不同的屏幕尺寸和纵横比，对网站布局提出了严峻考验。

CSS 媒体查询：解决方案

CSS 媒体查询是一种强大且灵活的工具，可以根据设备的屏幕特性（例如屏幕宽度、纵横比和方向）应用特定的 CSS 样式。它由媒体类型和条件表达式组成，条件表达式用于检测特定的媒体特性。

CSS 媒体查询语法

@media <media_type> and ( <condition> ) {
  /* CSS 样式 */
}

<media_type>：要应用样式的媒体类型，例如 screen（屏幕）、print（打印）或 handheld（手持设备）。
<condition>：检测媒体特性的条件表达式，例如 width（宽度）、height（高度）、orientation（方向）或 aspect-ratio（纵横比）。
()：条件表达式的可选部分，表示媒体特性必须与条件完全匹配。

常见用法

根据屏幕宽度调整样式

/* 屏幕宽度小于 480px 的设备 */
@media (max-width: 480px) {
  /* 针对小屏幕的 CSS 样式 */
}

/* 屏幕宽度介于 480px 和 768px 之间的设备 */
@media (min-width: 480px) and (max-width: 768px) {
  /* 针对中屏幕的 CSS 样式 */
}

/* 屏幕宽度大于 768px 的设备 */
@media (min-width: 768px) {
  /* 针对大屏幕的 CSS 样式 */
}

根据屏幕高度调整样式

/* 屏幕高度小于 480px 的设备 */
@media (max-height: 480px) {
  /* 针对矮屏幕的 CSS 样式 */
}

/* 屏幕高度介于 480px 和 768px 之间的设备 */
@media (min-height: 480px) and (max-height: 768px) {
  /* 针对中等高度屏幕的 CSS 样式 */
}

/* 屏幕高度大于 768px 的设备 */
@media (min-height: 768px) {
  /* 针对高屏幕的 CSS 样式 */
}

根据屏幕方向调整样式

/* 横向设备 */
@media (orientation: landscape) {
  /* 针对横向设备的 CSS 样式 */
}

/* 纵向设备 */
@media (orientation: portrait) {
  /* 针对纵向设备的 CSS 样式 */
}

根据屏幕纵横比调整样式

/* 16:9 纵横比的设备 */
@media (aspect-ratio: 16/9) {
  /* 针对 16:9 纵横比设备的 CSS 样式 */
}

/* 4:3 纵横比的设备 */
@media (aspect-ratio: 4/3) {
  /* 针对 4:3 纵横比设备的 CSS 样式 */
}