首页 技术设计 前端 css

# 1. 使用 clamp() 实现响应式字体大小

clamp() 函数可以让你轻松实现响应式字体大小，避免手动编写复杂的媒体查询。

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

解释： clamp(最小值, 理想值, 最大值) ，字体大小会根据视口宽度自动调整，但不会超出设定的范围。

# 2. 利用 aspect-ratio 控制元素宽高比

aspect-ratio 属性可以轻松控制元素的宽高比，特别适合处理图片、视频等媒体内容。

img {
  aspect-ratio: 16 / 9;
}

使用场景：确保图片或视频在不同设备上保持一致的宽高比。

# 3. 使用 gap 简化网格和弹性布局的间距

gap 属性可以快速为网格（Grid）和弹性盒子（Flexbox）布局设置间距，无需使用繁琐的 margin 。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

优势：代码更简洁，间距控制更直观。

# 4. 利用 backdrop-filter 实现毛玻璃效果

backdrop-filter 可以为元素的背景添加滤镜效果，轻松实现毛玻璃效果。

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

使用场景：弹窗、卡片等需要突出显示的元素。

# 5. 使用 scroll-snap 实现平滑滚动定位

scroll-snap 可以让页面滚动时自动吸附到指定位置，适合轮播图、全屏滚动等场景。

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
.section {
  scroll-snap-align: start;
}
优势：提升用户体验，滚动效果更流畅。
# 6. 利用 @supports 实现渐进增强
@supports 规则可以检测浏览器是否支持某个 CSS 特性，从而实现渐进增强。
@supports (display: grid) {
  .container {
    display: grid;
  }
}
使用场景：兼容性处理，确保在不支持某些特性的浏览器中提供备用方案。
# 7. 使用 conic-gradient 创建锥形渐变
conic-gradient 可以创建围绕中心点的渐变效果，适合制作饼图、色轮等。
.pie-chart {
  background: conic-gradient(red 0% 25%, green 25% 50%, blue 50% 100%);
  border-radius: 50%;
}
优势：无需使用 SVG 或 JavaScript，纯 CSS 实现复杂图形。
# 8. 利用 :is() 和 :where() 简化选择器
:is() 和 :where() 可以简化复杂的选择器，减少代码冗余。
:is(h1, h2, h3) {
  color: #333;
}
:where(.card, .modal) {
  padding: 20px;
}
区别： :is() 会影响优先级，而 :where() 的优先级始终为 0。
# 9. 使用 will-change 优化动画性能
will-change 可以提前告知浏览器哪些属性即将发生变化，从而优化动画性能。
.element {
  will-change: transform, opacity;
}
注意：不要滥用，仅在需要时使用。
# 10. 利用 @property 自定义 CSS 变量
@property 可以定义带有类型和初始值的 CSS 变量，增强变量的可控性。
@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}
.element {
  --primary-color: #00ff00;
  background: var(--primary-color);
}
使用场景：动态主题切换、复杂动画控制。