“移动优先”是什么意思

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 6 课，共 35 课。

移动优先是一种设计策略，你先为移动设备构建网站，然后逐步增强网站在更大屏幕上的体验。
核心理念是，现在大多数用户都用手机浏览网页，所以从小屏幕开始设计，能确保你的网站对大多数访客都能正常运行。

先编写移动端样式：

body {
  font-size: 16px;
  padding: 10px;
}

然后使用媒体查询，让你的设计适配更大的屏幕：

/* 宽度超过 768px 的设备所用的样式 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

这种方法能确保你的网站优先适配小屏幕，然后再为使用大屏幕设备的用户优化体验。

挑战

简单

给定的 HTML 中有一个简单的导航菜单。你的任务是使用移动优先方法为它设置样式。

1. 先设置移动端样式

让每个菜单项占据容器的全部宽度（垂直排列）。
将链接设为 display: block，让它们占据全部宽度。其他样式（颜色、边框等）由你决定。效果可以像下方示例图片这样。

2. 设置更大屏幕的样式

已经为屏幕宽度为 min-width: 768px 的情况提供了媒体查询。
在媒体查询中，为 .menu 使用 display: flex，将菜单布局改为水平排列。
调整菜单项之间的间距，使其与下方示例图片一致。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>