利用媒体查询处理不同终端下的响应式设计

随着移动设备的普及和用户对多终端的需求，响应式设计已经成为前端开发不可避免的一个话题。而媒体查询则是处理不同终端下的响应式设计必不可少的一种手段。本文主要介绍利用媒体查询处理响应式设计的方法和技巧，同时给出实际场景下的示例代码。

什么是媒体查询

媒体查询是CSS3引入的一个新特性，用于根据设备的属性（如宽度、高度、分辨率、设备方向等）调整页面的样式。在响应式设计中，我们可以使用媒体查询来针对不同的终端进行一些样式的调整，以达到更好的用户体验。

媒体查询的语法非常简单，格式为：

@media mediatype and (条件1) { CSS规则 }

其中，mediatype可以是all、print、screen、tv等设备类型，条件1则是设备属性判断的条件，可以是min-width、max-width、orientation等等。CSS规则则表示在满足条件1的情况下，对页面的样式进行调整。

下面是一个简单的媒体查询的例子：

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

这个例子表示在屏幕宽度小于等于768px的情况下，将body的字体大小调整为14px。

媒体查询的应用

1. 根据屏幕分辨率进行调整

在不同的屏幕分辨率下，可能需要对字体大小、图片大小等进行不同的调整。因此，我们可以使用媒体查询来针对不同的屏幕分辨率调整页面样式。例如：

// www.javascriptcn.com code example
/* 屏幕宽度小于等于480px */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

/* 屏幕宽度大于480px，小于等于768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* 屏幕宽度大于768px */
@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

2. 根据设备方向进行调整

在移动设备中，用户常常需要在横屏和竖屏之间切换。因此，我们可以使用媒体查询来针对不同的设备方向进行调整。例如：

// www.javascriptcn.com code example
/* 设备竖屏 */
@media screen and (orientation: portrait) {
    body {
        font-size: 14px;
    }
}

/* 设备横屏 */
@media screen and (orientation: landscape) {
    body {
        font-size: 16px;
    }
}

3. 根据设备类型进行调整

在不同的设备类型下，用户对页面的需求也会有所不同。因此，我们可以使用媒体查询来针对不同的设备类型进行调整。例如：

// www.javascriptcn.com code example
/* 所有设备 */
@media all {
    body {
        font-size: 14px;
    }
}

/* 只针对屏幕设备 */
@media screen {
    body {
        font-size: 16px;
    }
}

/* 只针对打印设备 */
@media print {
    body {
        font-size: 12px;
    }
}

示例代码

下面是一个实际场景下的示例代码，该代码通过媒体查询来针对不同的设备宽度进行样式调整，从而适应不同的终端。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>响应式设计示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        header {
            height: 100px;
            background-color: #0f0;
        }
        nav {
            height: 50px;
            background-color: #00f;
        }
        section {
            height: 300px;
            background-color: #f00;
        }
        footer {
            height: 100px;
            background-color: #ff0;
        }
        /* 手机设备 */
        @media screen and (max-width: 480px) {
            header {
                height: 50px;
                background-color: #0f0;
            }
            nav {
                height: 40px;
                background-color: #00f;
            }
            section {
                height: 200px;
                background-color: #f00;
            }
            footer {
                height: 50px;
                background-color: #ff0;
            }
        }
        /* 平板设备 */
        @media screen and (min-width: 481px) and (max-width: 768px) {
            header {
                height: 80px;
                background-color: #0f0;
            }
            nav {
                height: 50px;
                background-color: #00f;
            }
            section {
                height: 250px;
                background-color: #f00;
            }
            footer {
                height: 80px;
                background-color: #ff0;
            }
        }
        /* PC设备 */
        @media screen and (min-width: 769px) {
            header {
                height: 100px;
                background-color: #0f0;
            }
            nav {
                height: 60px;
                background-color: #00f;
            }
            section {
                height: 300px;
                background-color: #f00;
            }
            footer {
                height: 100px;
                background-color: #ff0;
            }
        }
    </style>
</head>
<body>
    <header>Header</header>
    <nav>Nav</nav>
    <section>Section</section>
    <footer>Footer</footer>
</body>
</html>

通过媒体查询的方式，我们在不同的设备宽度下调整了页面中各个元素的高度和背景颜色，以达到更好的用户体验。这也是响应式设计中，利用媒体查询进行多终端适配的一个非常重要的手段。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca8e0ce46428fe9e2d3ff6