响应式页面布局技巧

1. Padding:

padding: min(5em, 8%);

min() 函数会选取两个值中的较小值，这样可以确保 padding 在不同屏幕尺寸下都能适应。

2. Font Size:

font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);

clamp() 函数确保字体大小在最小值和最大值之间动态调整，同时 calc() 计算表达式可以根据视口宽度进行计算。

3. 图片 Image:

max-width:100%
height:auto
object-fit: cover/contain;
aspect-ratio: 1/1;
// 16/9 9/16 ...

object-fit: cover 确保图片填充整个容器，并裁剪超出部分。aspect-ratio 属性用于指定元素的宽高比，但需要注意的是，aspect-ratio 是一个相对较新的属性，支持度有限。

4. Height:

height: 100vh; // 移动端会有个nav高度
height: 100dvh // 移动端显示的就是一个视口，不会多出来

5. 导航栏:

transition: opacity 200ms ease-in-out;
.navbar {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.navbar.active {
  opacity: 1;
}

用 opacity来添加淡入淡出效果而不是 display： none；