CSS3 多媒体查询

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

语法

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

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

示例

响应式布局

-- -------------------- ---- -------
-- ------- ----- -------- --
------ ------ --- ----------- ------ -
    ---- -
        ---------- -----
    -
    
    ---------- -
        ------ -----
    -
-

-- ------- ------ -------- --
------ ------ --- ----------- ------- -
    ---- -
        ---------- -----
    -
    
    ---------- -
        ------ ----
    -
-

打印样式

-- -------------------- ---- -------
------ ----- -
    ---- -
        ---------- -----
    -
    
    -------- ------- -
        -------- -----
    -
-

横屏样式

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

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