HTML实现移动端布局与页面自适应

作者：System 时间：2024年08月15日分类：所有,html 字数：1023

这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端布局示例</title>
    <style>
        /* 移动端常用布局样式 */
        .container {
            width: 100%;
            max-width: 768px; /* 最大宽度限制 */
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
        }
        /* 响应式布局示例 */
        @media (max-width: 768px) {
            .column {
                width: 50%;
                float: left;
            }
        }
        @media (max-width: 480px) {
            .column {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <p>列内容</p>
        </div>
        <div class="column">
            <p>列内容</p>
        </div>
    </div>
</body>
</html>

这个代码实例展示了如何使用HTML和内嵌样式创建一个在移动端友好的布局。它使用了响应式设计的原则，通过媒体查询根据屏幕宽度调整列的宽度和浮动方式。通过这种方式，页面可以在不同的设备上进行自适应显示。

HTML实现移动端布局与页面自适应

评论已关闭

推荐阅读