9 个移动优先 CSS 技巧，希望前端开发者早点知道

1. 从流体布局开始

使用百分比、VW 和 Vh 来实现自然缩放的布局。

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

不要锁定像素宽度，流体布局会随着屏幕而变化。

2. 使用基于视口的排版

无需断点即可动态缩放字体：

html  {
   font-size: calc(60% + 0.8vmin);
}
* {
   font-size: 1rem;
}

这会自动调整文本大小，保持响应，并尊重用户偏好。

3. 利用 Flexbox 和 Grid

现代布局系统让您无需浮动或手动媒体查询即可构建自适应 UI。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  flex: 1 1 200px;
}

CSS Grid 还具有响应式模式，例如自动填充和 Minimax()。

4. 谨慎组织媒体查询

通过隔离断点来保持 CSS 代码清晰：

/* styles.scss */
@import "base";
@media (min-width: 590px) {
  @import "header_medium";
  @import "footer_medium";
}

这使您的布局更改模块化并避免分散的媒体规则。

5. 使用 clamp()实现流体排版

创建响应式、有界限的排版：

h1 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}

它可以平滑地扩展，防止极端情况并确保可读性。

6. 使用 @supports() 进行功能查询

优雅地定位 CSS 功能：

.container {
  display: block;
}
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

这允许现代增强功能，同时保留向后支持。

7. 优化图片和媒体

提升媒体的响应速度和轻量级：

<img
  src="img-small.jpg"
  srcset="img-med.jpg 600w, img-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt=""
/>

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

这确保了跨设备的尺寸和纵横比正确。

8. 尊重用户偏好

它们是 CSS 媒体特性（media features），用于检测用户的系统偏好设置，以便提供更符合用户需求的样式。这些特性属于用户偏好媒体查询（User Preference Media Queries），主要用于增强可访问性（accessibility）和改善用户体验。

尊重无障碍：

@media (prefers-contrast: high) {
  /* 高对比度模式调整 */
  body {
    background: #000; /* 黑色背景 */
    color: #fff; /* 白色文本 */
    font-size: 1.2rem; /* 增大字体 */
  }

  .button {
    border: 2px solid #fff; /* 更明显的边框 */
    background: #000;
    color: #fff;
  }

  a {
    text-decoration: underline; /* 确保链接清晰可见 */
    color: #0ff; /* 高对比度青色 */
  }
}
@media (prefers-reduced-motion) {
  * {
    animation-duration: 0.01ms !important;
  }
}

它使您的设计富有同理心和包容性。

9. 隐藏或折叠非必需元素

对可选元素使用清晰的规则：

@media (max-width: 480px) {
  .sidebar {
    display: none;
  }
}

这优先考虑内容，简化用户界面，并提高清晰度。

移动优先 CSS 并非技巧，而是精妙的策略。通过应用流动单位、现代布局系统、响应式排版以及无障碍优先的思维，您可以构建出精致、快速且包容的网站。