移动端的布局用过媒体查询吗？写一个试试

当然，媒体查询（Media Queries）是CSS3的一个特性，允许开发者根据设备的特定特性（如设备的宽度、高度、方向等）来应用不同的CSS样式。这在移动端开发中尤为重要，因为它可以帮助我们创建响应式设计，以适应各种屏幕尺寸和设备类型。

下面是一个简单的示例，展示如何使用媒体查询来改变一个元素的背景颜色和字体大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries Example</title>
    <style>
        /* 默认样式 */
        .container {
            background-color: lightblue;
            font-size: 16px;
            padding: 20px;
            text-align: center;
        }

        /* 当屏幕宽度小于600px时，应用以下样式 */
        @media (max-width: 600px) {
            .container {
                background-color: lightgreen;
                font-size: 14px;
            }
        }

        /* 当屏幕宽度在600px到900px之间时，应用以下样式 */
        @media (min-width: 601px) and (max-width: 900px) {
            .container {
                background-color: lightyellow;
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello, World!</h1>
        <p>This is an example of using media queries in mobile layout.</p>
    </div>
</body>
</html>

在这个示例中，我们定义了一个.container类，并为其设置了默认的背景颜色和字体大小。然后，我们使用媒体查询来根据屏幕宽度改变这些样式。当屏幕宽度小于600px时，背景颜色变为浅绿色，字体大小变为14px。当屏幕宽度在600px到900px之间时，背景颜色变为浅黄色，字体大小变为18px。

posted @ 2025-01-19 06:07  王铁柱6  阅读(21)  评论(0)    收藏  举报