响应式设计中如何用 @media 适配不同的显示器-JavaScript中文网-JavaScript教程资源分享门户

响应式设计中如何用 @media 适配不同的显示器

随着数字化信息的快速发展，人们的生活方式也在不断变化，人们的使用设备也千奇百怪。比如，有些人使用手机，有些人使用平板电脑以及笔记本电脑等。因此，对于网站设计的要求也发生了改变。对于一个好的网站，需要能够自动适应各种设备的规格，此时响应式设计就应运而生。

响应式设计基于 @media 查询来实现网站的适配和排版。@media查询允许您定义多种排版，您可以在不同的屏幕宽度范围内定义 CSS 样式。这个功能使设计师可以在不同设备上使用不同的CSS规则，以适应不同的视口大小。

@media 查询可以基于视口宽度（vw）来设置样式。它允许您定义多个 CSS 规则，以适应不同屏幕宽度。

下面是一些常用的 @media 查询规则：

/* 设备宽度小于 480 像素 */
@media screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }
}
/* 设备宽度大于 480 像素 */
@media screen and (min-width: 480px) {
    body {
        font-size: 14px;
    }
}
/* 设备宽度在 480 像素和 768 像素之间 */
@media screen and (min-width: 480px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

在这里，@media查询规则指定了 3 个不同屏幕宽度下的字体大小。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>响应式设计</title>
    <style>
        /* 设备宽度小于 480 像素 */
        @media screen and (max-width: 480px) {
            body {
                font-size: 12px;
            }
        }

        /* 设备宽度大于 480 像素 */
        @media screen and (min-width: 480px) {
            body {
                font-size: 14px;
            }
        }
        
        /* 设备宽度在 480 像素和 768 像素之间 */
        @media screen and (min-width: 480px) and (max-width: 768px) {
            body {
                font-size: 16px;
            }
        }
    </style>
</head>

<body>
    <h1>响应式设计示例</h1>
    <p>响应式设计可以自动适应各种显示器的规格，从而使网站在不同设备上看起来都非常美观。</p>
    <p>您可以使用 CSS 的 @media 查询规则来定义网站在不同屏幕大小下的样式。</p>
</body>

</html>

总结一下，响应式网站设计已成为网页设计中的必要技能之一，通过使用 @media 查询，您可以为不同屏幕大小定义 CSS 规则。这个功能极大地提高了您的设计效率，同时也可以使您的网站获得更好的视觉体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a21eafadd4f0e0ffa2dfb8

响应式设计中如何用 @media 适配不同的显示器

纠错反馈