Register
> 博客>

手机自适应页面代码

新星源码网 1年前 11 0

以下是一个简单的手机自适应页面代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机自适应页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            background-color: #f5f5f5;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        main {
            padding: 10px;
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        section {
            margin-bottom: 20px;
        }
        h1 {
            font-size: 24px;
            margin: 0 0 10px;
        }
        p {
            margin: 0 0 10px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        @media (max-width: 480px) {
            header {
                font-size: 18px;
            }
            h1 {
                font-size: 20px;
            }
            p {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>手机自适应页面</h1>
    </header>
    <main>
        <section>
            <h1>欢迎来到我们的网站</h1>
            <p>这是一个简单的手机自适应页面示例，可以在不同大小的屏幕上自动调整布局。</p>
            <img src="https://via.placeholder.com/600x400" alt="示例图片">
        </section>
        <section>
            <h1>我们的服务</h1>
            <p>我们提供各种服务，包括网站设计、开发、SEO、社交媒体营销等。</p>
            <p>请联系我们以获取更多信息。</p>
        </section>
        <section>
            <h1>联系我们</h1>
            <p>电话：123-456-7890</p>
            <p>电子邮件：info@example.com</p>
        </section>
    </main>
</body>
</html>

这个示例页面包括一个简单的头部、主体和三个部分。在样式中，我们使用了 @media 查询来针对不同的屏幕大小应用不同的样式。在这个示例中，我们将字体大小和标题大小在小于 480 像素的屏幕上调整为更小的值。此外，我们还使用了 max-width 属性来限制主体的最大宽度，并使用 margin: 0 auto 属性将其居中对齐。最后，我们使用了 box-shadow 属性为主体添加了一个简单的阴影效果。

在上面的代码中，我们使用了 meta 标签来设置视口的宽度和缩放比例，以确保页面在不同大小的设备上都能正确显示。具体来说，width=device-width 表示视口的宽度应该等于设备的宽度，而 initial-scale=1.0 表示页面的初始缩放比例为 1.0。

在样式中，我们使用了一些常见的 CSS 属性来控制页面的布局和外观。例如，我们使用了 margin 和 padding 属性来设置元素的边距和内边距，使用 font-family 和 font-size 属性来设置字体和字号，使用 background-color 属性来设置背景颜色，等等。

此外，我们还使用了 max-width 属性来限制元素的最大宽度，以确保它们在大屏幕上不会过于宽敞，而在小屏幕上不会过于拥挤。我们还使用了 height: auto 属性来确保图片在缩放时保持纵横比不变。

最后，我们使用了 @media 查询来根据屏幕大小应用不同的样式。这是一种响应式设计的技术，可以让页面在不同的设备上自适应布局和样式。在这个示例中，我们只是简单地调整了字体大小和标题大小，但在实际项目中，您可能需要更复杂的样式更改来适应不同的屏幕大小和设备类型。

Related

热门文章

微海报