菜鸟教程
教程 css tutorial

移动端布局

移动端布局需要考虑屏幕尺寸小、触控操作等特点，采用响应式设计和灵活布局，保证内容清晰且操作便捷。

关键技术

  • 弹性盒子（Flexbox）
  • 媒体查询
  • 视口设置
  • 触控友好设计

示例代码

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>移动端布局示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: #fafafa;
color: #333;
}


header {
  background-color: #3498db;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 1.5rem;
}

nav {
  display: flex;
  justify-content: space-around;
  background-color: #2980b9;
}

nav a {
  color: white;
  padding: 12px 0;
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  background-color: #1c5980;
}

main {
  padding: 15px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (min-width: 600px) {
  nav {
    justify-content: flex-start;
  }

  nav a {
    flex: none;
    padding: 15px 25px;
    border-right: 1px solid #1c5980;
  }

  nav a:last-child {
    border-right: none;
  }

  main {
    max-width: 900px;
    margin: 20px auto;
  }
}



</style>
</head>


<body>
<header>移动端友好布局</header>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<main>
<div class="card">
<h2>卡片标题</h2>
<p>这是一段适合移动端阅读的内容示例，布局灵活且易于操作。</p>
</div>
<div class="card">
<h2>另一个卡片</h2>
<p>利用弹性盒子和媒体查询，实现不同设备的良好适配。</p>
</div>
</main>
</body>


</html>

相关内容