CSS | 媒体查询

简介

媒体查询是一种CSS3的技术，可根据设备特征，如设备宽度、高度、浏览器窗口大小等，动态的改变样式。

应用场景

1. 响应式设计

媒体查询常用于响应式网页设计，根据用户使用设备不同，自适应地调整网页的布局、尺寸、字体大小等样式细节，以适配不同屏幕尺寸的设备，包括桌面电脑、笔记本电脑、平板电脑、手机等。

2. 隐藏、显示内容

媒体查询可用于隐藏或显示内容。例如，在小于某个分辨率的设备上，将某个元素隐藏掉，或者在打印时隐藏某些元素。

3. 增强用户交互体验

媒体查询还可用于增强用户交互体验。例如，根据触摸屏设备与非触摸屏设备的差异，在触摸屏设备上显示一个更大的按钮，以便更容易点击。

语法

@media mediatype and|not|only (media feature) {
    CSS rules;
}

• @media 告诉浏览器，媒体查询开始了。
• mediatype 表示样式的使用媒体类型，如all(所有设备)、screen(屏幕设备)、print(打印机和打印预览)等等。
• and、not、only 用来链接媒体类型和媒体特性条件。
• (media feature) 则是CSS属性句柄，用于指定设备的宽度、设备高度、屏幕方向等。

常见媒体特性

1. 宽度和高度

@media screen and (min-width: 500px) {
    /* 只适用于宽度大于等于500px的屏幕设备 */
}
@media screen and (max-width: 768px) {
    /* 只适用于宽度小于等于768px的屏幕设备 */
}

2. 设备方向

@media screen and (orientation: portrait) {
    /* 只适用于竖屏设备（高比宽大） */
}
@media screen and (orientation: landscape) {
    /* 只适用于横屏设备（高比宽小） */
}

3. 像素密度

@media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    /* 仅适用于像素密度大于等于2的屏幕设备 */
}

总结

媒体查询是CSS3的重要特性，可用于响应式设计、隐藏/显示内容、增强用户交互体验等。在不同的媒体类型和媒体特性条件下，我们可以为不同设备提供定制化的样式布局，提高网站的可读性和易用性。