CSS的媒体查询：响应式布局的利器

关于CSS的媒体查询

CSS媒体查询是CSS层叠样式表(Cascading Style Sheets)中的一个核心功能，它使得开发者能够根据不同的设备特性和环境条件来应用不同的样式规则。这是实现响应式网页设计的关键技术，确保网站或应用能够在多种设备上，包括桌面、平板、手机等，提供良好的用户体验。

基础语法

媒体查询的基本结构如下：

@media media-type and (media-feature: value) {
    /* CSS 样式规则 */
}

选项解释

• media-type：定义媒体类型，如 screen（用于电脑屏幕、手机屏幕等）、print（用于打印）、speech（用于屏幕阅读器）。默认值为 all，意味着规则适用于所有类型的媒体。
• media-feature：媒体特性，用来检查设备的特定条件，比如视口宽度(width)、高度(height)、设备像素比(device-pixel-ratio)、颜色(color)等，这些特性允许你根据不同的设备条件和环境来定制样式。
• value：媒体特性所对应的值或范围。
• and, not, only：逻辑操作符，用于结合多个媒体类型或特性，实现更复杂的查询条件。

常见媒体特性

CSS媒体查询支持多种媒体特，以下是一些常用的媒体特性的详细说明：

1. 宽度和高度特性：

• width: 目标输出设备的视口宽度。
• min-width: 视口宽度的最小值。
• max-width: 视口宽度的最大值。
• height: 目标输出设备的视口高度。
• min-height: 视口高度的最小值。
• max-height: 视口高度的最大值。

2. 分辨率和像素比：

• device-width 和 device-height: 设备的屏幕物理宽度和高度。
• min-device-width 和 max-device-width: 设备屏幕物理宽度的最小值和最大值。
• min-device-height 和 max-device-height: 设备屏幕物理高度的最小值和最大值。
• resolution: 设备的分辨率，可以是dpi（每英寸点数）, dpcm（每厘米点数）或 dppx（每像素点数）。
• min-resolution 和 max-resolution: 分辨率的最小值和最大值。

3. 方向和比例：

• orientation: 设备的方向，取值为portrait（竖屏）或landscape（横屏）。
• aspect-ratio: 输出设备的宽高比，格式为x/y。
• device-aspect-ratio: 设备的屏幕宽高比。

4. 颜色和颜色索引：

• color: 设备的颜色位数。
• min-color 和 max-color: 设备颜色位数的最小值和最大值。
• color-index: 设备的颜色索引数。
• min-color-index 和 max-color-index: 设备颜色索引数的最小值和最大值。

5. 环境和设备特性：

• monochrome: 单色设备的颜色位数。
• grid: 是否为网格设备，如终端。
• scan: 显示设备的扫描方式，如progressive（逐行扫描）或interlace（隔行扫描）。
• update-frequency: 显示更新频率，如slow或fast。

6. 其他特性：

• any-hover: 检测是否有任何指针设备能悬停。
• any-pointer: 指针精度，如fine、coarse或none。
• hover: 指针是否能悬停。
• pointer: 主要输入设备的精度。
• inverted-colors: 用户是否启用了颜色反转。
• prefers-color-scheme: 用户偏好颜色方案，如light、dark或no-preference。
• prefers-reduced-motion: 用户是否偏好减少动画或运动。
• prefers-contrast: 用户的对比度偏好，如no-preference、high或low。

使用示例

假设我们要为宽度小于等于480px的设备设置特定样式，可以这样写：

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

这段代码意味着，当视口宽度不超过480像素时，body元素的字体大小会被设置为14像素。

复杂的设计可能需要结合多个条件，例如：如果视口宽度在大于480，小于1000的时候，body元素的字体大小会被设置为18像素；如果视口宽度大于1000的时候，body元素的字体大小会被设置为22像素

@media  (min-width: 480px) and (max-width: 1000px) {
    body{
       font-size: 18px;
    }
}
@media  (min-width: 1000px) {
    body{
       font-size: 22px;
    }
}

实战应用

媒体查询广泛应用于响应式设计中，允许开发者根据不同设备的特性和用户的浏览环境，灵活地调整布局、字体大小、图片尺寸等，确保内容的可读性和易用性。

以下是几个CSS媒体查询的实战例子，这些示例覆盖了响应式设计中常见的应用场景：

1. 调整字体大小以适应小屏幕

在屏幕宽度小于600px时减小文本的字体大小，以提高阅读体验。

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

2. 切换导航栏布局

当屏幕宽度足够大时，显示水平导航栏；当屏幕较窄时，将其转换为垂直折叠式导航。

/* 默认样式，可能适用于移动端 */
.navbar {
    display: flex;
    flex-direction: column;
}

/* 当屏幕宽度至少为768px时，变为水平布局 */
@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
    }
}

3. 隐藏和显示内容

在小屏幕上隐藏某些非核心内容或组件，以减少信息密度，提升用户体验。

.sidebar {
    display: block;
}

@media (max-width: 992px) {
    .sidebar {
        display: none;
    }
}

4. 优化图片展示

根据屏幕尺寸加载不同分辨率的图片，节省流量并提升加载速度。

<img src="image-mobile.jpg" srcset="image-desktop.jpg 1024w, image-tablet.jpg 768w" alt="Example Image">

<!-- CSS -->
@media (min-width: 769px) {
    img[src*="mobile"] {
        content: url("image-tablet.jpg");
    }
}

@media (min-width: 1025px) {
    img[src*="tablet"] {
        content: url("image-desktop.jpg");
    }
}

5. 调整列布局

在不同屏幕尺寸下自动调整网格布局，比如从单列到两列再到多列布局。

.container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

实战进阶

以上示例展示了媒体查询如何帮助我们根据不同的设备条件和屏幕尺寸来调整网页的视觉表现，从而实现更加灵活和优化的响应式设计。当然，还有一些更高级的用法，以实现更细致的设备特性和更精细的布局调整方面的灵活性。

1. 结合多个条件调整布局

当屏幕宽度在992px到1199px之间，并且设备处于横屏状态时，对页面布局进行特殊调整。

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
    .content {
        grid-template-columns: 2fr 1fr;
    }
    .sidebar {
        order: 1;
    }
}

2. 使用特性查询来改变滚动行为

在触摸屏设备上启用更平滑的滚动体验。

@media (hover: none) and (pointer: coarse) {
    body {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

3. 根据颜色深度调整图像

针对具有高色彩深度显示的设备提供更高品质的图像资源。

@media (color-gamut: p3) {
    .high-color-image {
        content: url('image-p3-color-gamut.jpg');
    }
}

4. 动态调整字体大小以适应不同的阅读距离

根据设备的像素密度调整字体大小，以确保在不同设备上字体的物理尺寸一致。

@media (min-resolution: 2dppx) {
    body {
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));
    }
}

5. 针对不同分辨率和方向优化视频尺寸

在宽屏设备上保持视频的宽高比，并在窄屏设备上全屏显示视频。

@media (min-aspect-ratio: 16/9) {
    video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    video {
        width: auto;
        height: 100%;
    }
}

今天分享的内容非常干，也很实用，得空好好消化一下吧。