请解释在编写网站时，响应式与移动优先的区别。 ​

请注意，这两种方法不是互斥的。

使一个网站响应意味着网站会根据设备屏幕的尺寸会自行调整一些元素的尺寸和功能，通常是通过 CSS 媒体查询的视口宽度，例如，使字体在小屏幕上变小。

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

移动优先策略同样也指的是响应式，但是它建议我们应该默认定义移动设备的所有样式，仅仅添加特定的规则用来适配其他设备，下面是前一个例子：

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

移动优先策略有 2 大优势：

• 在移动设备上有更好的性能，因为应用于它们的规则无需针对任何媒体查询的验证。
• 它让你强制编写与响应 CSS 规则相关的更干净的代码。