CSS中“@media”的使用

@media是CSS（层叠样式表）中的一个规则，用于创建响应式网页设计。它允许你根据不同的媒体类型（如屏幕、打印等）和媒体特性（如屏幕宽度、高度、分辨率等）来应用不同的样式。以下是一些常用用法：

1. 根据屏幕宽度设置样式（最常见的用法）

• 基本语法结构：

@media (max - width: [value]) {
    /* 当屏幕宽度小于等于[value]时应用的样式 */
}
@media (min - width: [value]) {
    /* 当屏幕宽度大于等于[value]时应用的样式 */
}

• 示例：

/* 当屏幕宽度小于等于600px时，将段落文字颜色设置为红色 */
@media (max - width: 600px) {
    p {
        color: red;
    }
}
/* 当屏幕宽度大于等于900px时，将段落文字字体大小设置为20px */
@media (min - width: 900px) {
    p {
        font - size: 20px;
    }
}

这个示例展示了如何根据屏幕的宽度来改变段落（p）元素的样式。在移动设备或者小屏幕浏览器（宽度小于等于600px）中，段落文字颜色会变成红色；而在较宽的屏幕（宽度大于等于900px）中，字体大小会变为20px。

2. 根据屏幕高度设置样式

• 语法：

@media (max - height: [value]) {
    /* 当屏幕高度小于等于[value]时应用的样式 */
}
@media (min - height: [value]) {
    /* 当屏幕高度大于等于[value]时应用的样式 */
}

• 示例：

/* 当屏幕高度小于等于400px时，将div元素背景色设为灰色 */
@media (max - height: 400px) {
    div {
        background - color: gray;
    }
}

这在一些特殊场景下很有用，比如当屏幕高度有限（如某些小型设备的竖屏模式）时，可以调整元素的布局和外观，使页面更合理地显示。

3. 根据设备方向（横屏/竖屏）设置样式

• 语法：

@media (orientation: landscape) {
    /* 当设备处于横屏时应用的样式 */
}
@media (orientation: portrait) {
    /* 当设备处于竖屏时应用的样式 */
}

• 示例：

/* 当设备处于横屏时，将图片宽度设为100% */
@media (orientation: landscape) {
    img {
        width: 100%;
    }
}
/* 当设备处于竖屏时，将图片高度设为100% */
@media (orientation: portrait) {
    img {
        height: 100%;
    }
}

这种方式可以确保图像在不同的设备方向下都能很好地适应屏幕，提供更好的视觉体验。

4. 组合多个媒体特性条件

• 语法：

@media (min - width: [value1]) and (max - width: [value2]) {
    /* 当屏幕宽度在[value1]和[value2]之间时应用的样式 */
}

• 示例：

/* 当屏幕宽度在768px和1024px之间时，将标题字体加粗并设为蓝色 */
@media (min - width: 768px) and (max - width: 1024px) {
    h1 {
        font - weight: bold;
        color: blue;
    }
}

通过组合条件，可以更精确地控制在特定屏幕尺寸范围内的样式，满足复杂的设计需求。

5. 根据设备类型（如屏幕、打印）设置样式

• 语法：

@media screen {
    /* 应用于屏幕设备的样式 */
}
@media print {
    /* 应用于打印时的样式 */
}

• 示例：

/* 在屏幕上，链接颜色为蓝色，有下划线 */
@media screen {
    a {
        color: blue;
        text - decoration: underline;
    }
}
/* 打印时，链接颜色为黑色，无下划线 */
@media print {
    a {
        color: black;
        text - decoration: none;
    }
}

这样可以为用户在屏幕浏览和打印网页时提供不同的视觉体验。在打印网页时，通常希望去掉一些不必要的装饰元素，如链接下划线，以节省油墨并使打印内容更整洁。