CSS3 多媒体查询

在现代网页设计中，响应式设计已经成为一个非常重要的概念。CSS3 的多媒体查询（Media Queries）使得我们可以根据不同的设备尺寸和特性来定制不同的样式，从而实现网页在不同设备上的最佳显示效果。

语法

@media 媒体类型 and (媒体特性) {
    /* CSS 样式 */
}

• 媒体类型：如screen、print、speech等。代表了我们要应用样式的设备类型。
• 媒体特性：如min-width、max-width、orientation等。用来描述设备的属性。

示例

响应式布局

// www.javascriptcn.com code example
/* 当屏幕宽度小于 600px 时，改变页面布局 */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
    
    .container {
        width: 100%;
    }
}

/* 当屏幕宽度大于 1200px 时，改变页面布局 */
@media screen and (min-width: 1200px) {
    body {
        font-size: 18px;
    }
    
    .container {
        width: 80%;
    }
}

打印样式

// www.javascriptcn.com code example
@media print {
    body {
        font-size: 12px;
    }
    
    .header, .footer {
        display: none;
    }
}

横屏样式

@media screen and (orientation: landscape) {
    .container {
        display: flex;
    }
}

通过使用多媒体查询，我们可以根据不同的设备特性和属性来优化网页的显示效果，使其在各种设备上都能够得到良好的展示。在实际开发中，多媒体查询是响应式设计的重要工具之一，也是提升用户体验的关键。