CSS 移动优先（Mobile First）
2024-08-26 20:25:01
CSS 移动优先（Mobile First）是一种样式表开发方法，它首先针对小尺寸设备（如手机）进行样式设计，然后逐步为更大尺寸的设备添加样式。这样做的好处是，你可以确保所有设备都能看到基本的版本，然后只需要在大尺寸设备上进行视觉改进。
实现移动优先通常涉及到以下几点：
设置 viewport，确保在移动设备上正确缩放。
使用媒体查询（Media Queries）来为更大尺寸的设备添加额外样式。
优先考虑元素的移动设备样式，然后逐步添加更复杂的样式。
下面是一个简单的移动优先 CSS 示例：
```
/* xs 移动端优先，默认100%宽 */
width: 100%;
/* sm 视口宽度最小需要576才生效，即 >= 576px */
@media screen and (min-width: 576px) {
width: 540px;
}
/* md 视口宽度最小需要768才生效，即 >= 768px */
@media screen and (min-width: 768px) {
width: 720px;
}
/* lg 视口宽度最小需要992才生效，即 >= 992px */
@media screen and (min-width: 992px) {
width: 960px;
}
/* xl 视口宽度最小需要1200才生效，即 >= 1200px */
@media screen and (min-width: 1200px) {
width: 1140px;
}
/* xxl 视口宽度最小需要1400才生效，即 >= 1400px */
@media screen and (min-width: 1400px) {
width: 1320px;
}
```