CSS3 @media 查询

在 web 开发中，我们经常需要针对不同的设备或屏幕尺寸来设置不同的样式。这时就可以使用 CSS 属性 @media 来实现响应式设计。@media 可以根据不同的媒体查询条件来应用不同的样式规则。

媒体查询条件

媒体查询条件可以包括以下内容：

• 媒体类型：如 screen、print、speech 等。
• 媒体功能：如 width、height、orientation、aspect-ratio 等。

使用方法

@media 的语法如下：

@media mediatype and (media feature) {
    /* CSS 规则 */
}

示例代码：

@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

上面的代码表示当屏幕宽度大于等于 768px 时，应用这个样式规则。

常用媒体查询条件

• width：屏幕宽度。
• height：屏幕高度。
• orientation：屏幕方向，如 portrait 或 landscape。
• aspect-ratio：屏幕宽高比。
• color：颜色位数。
• resolution：屏幕分辨率。

媒体查询组合

可以组合多个媒体查询条件，并使用逻辑运算符 and、not、only、or 来连接。

示例代码：

@media screen and (min-width: 768px) and (orientation: landscape) {
    body {
        background-color: #f0f0f0;
    }
}

上面的代码表示在屏幕宽度大于等于 768px 且屏幕为横向时应用这个样式规则。

@media 属性可以帮助我们在不同的设备上提供更好的用户体验，让网页能够适应不同的屏幕尺寸和设备类型。