彻底弄明白CSS3的Media Queries(跨平台设计)

下面就为大家详细讲解“彻底弄明白CSS3的Media Queries(跨平台设计)”的完整攻略。

什么是 Media Queries

Media Queries 是 CSS3 中的一个新特性，它允许我们在不同的设备、分辨率以及屏幕方向下，对网页的样式进行不同的设计和呈现。Media Queries 的出现，使得我们可以更加精细的设计网站，让网页在不同的设备上都能够呈现最佳的体验。

Media Queries 的语法和用法

Media Queries 的语法非常简单。一般情况下，我们会将 Media Queries 声明在样式文件的最后面。Media Queries 的格式如下所示：

@media mediatype and (media feature){
    /* media query 匹配项的CSS样式 */
} 

其中 mediatype 是媒体类型，如 all, screen 等，而 media feature 是媒体特性，如 min-width、max-width、orientation、aspect-ratio 等等。下面，我们就来介绍几个常用的 media feature 和它们的用法：

1. min-width 和 max-width

min-width 和 max-width 是两个非常常用的媒体特性，它们用于在不同屏幕宽度下设定不同的样式。例如，我们希望在屏幕宽度大于 768px 时，h1 的字体大小为 36px；在屏幕宽度小于等于 768px 时，h1 的字体大小为 24px。这时，我们就可以这样写：

/* 当屏幕宽度大于等于 768px 时 */
@media screen and (min-width: 768px) {
    h1 {
        font-size: 36px;
    }
}

/* 当屏幕宽度小于 768px 时 */
@media screen and (max-width: 767px) {
    h1 {
        font-size: 24px;
    }
}

2. orientation

orientation 用于匹配设备的屏幕方向，可取值为 portrait 或 landscape。例如，我们希望在横向屏幕时，把 body 的背景颜色设置为灰色；在纵向屏幕时，不改变背景颜色。这时，我们就可以这样写：

/* 当设备是横向屏幕时 */
@media screen and (orientation: landscape) {
    body {
        background-color: #ccc;
    }
}

支持 Media Queries 的常见设备

绝大部分的现代设备都支持 Media Queries，包括桌面电脑、笔记本电脑、平板电脑、手机等等。不过，如果你需要支持一些老设备，那么 Media Queries 可能并不可用。在这种情况下，我们可以使用 Respond.js、Modernizr 等 polyfill 库，来模拟 Media Queries 的效果。

示例说明

下面，我们来看两个示例说明：

示例一：调整背景图像

假设我们有一张带有文本说明的背景图片，但是当屏幕宽度小于 1024px 时，文本将无法显示。这时，我们需要使用 Media Queries 来对这张背景图片进行调整。

首先，为了避免图片的变形，我们需要设置背景图片的宽度为 100%。然后，当屏幕宽度小于 1024px 时，我们将该图片替换为一个不带有文本说明的图片，让页面看起来更加整洁。代码如下：

.background {
    background: url("bg-1.jpg") no-repeat 0 0;
    background-size: 100% auto;
    height: 300px;
}

/* 当屏幕宽度小于等于 1024px 时 */
@media only screen and (max-width: 1024px) {
    .background {
        background: url("bg-2.jpg") no-repeat 0 0;
        background-size: 100% auto;
    }
}

示例二：布局的改变

假设我们有一个三栏布局，左右两栏宽度固定，中间栏宽度填补剩下的空间。但是，在移动设备上，由于屏幕宽度比较小，左右两栏会挤压到中间栏，导致布局错乱。这时，我们需要使用 Media Queries 来对这个布局进行调整。

首先，我们需要设置左右两栏的宽度，中间栏的宽度则通过 calc 计算得出。然后，当屏幕宽度小于 768px 时，我们将左右两栏设置为 100% 的宽度，并调整它们的顺序，让页面看起来更加整洁。代码如下：

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
}

.left, .right {
    width: 200px;
}

.middle {
    width: calc(100% - 400px);
}

/* 当屏幕宽度小于等于 768px 时 */
@media only screen and (max-width: 768px) {
    .left, .right {
        width: 100%;
        order: 1;
    }
    .middle {
        width: 100%;
        order: 2;
    }
}

通过上述示例，相信大家已经对 CSS3 的 Media Queries 有了更加深刻的理解和应用。