HTML实现移动端布局与页面自适应
<!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和内嵌样式创建一个在移动端友好的布局。它使用了响应式设计的原则，通过媒体查询根据屏幕宽度调整列的宽度和浮动方式。通过这种方式，页面可以在不同的设备上进行自适应显示。
评论已关闭