首页 › CSS › 响应式设计 › 视口单位与流式排版

现代视口单位

.fullscreen {
  height: 100vh;      /* 传统：可能被浏览器地址栏遮挡 */
  height: 100dvh;     /* dynamic：考虑地址栏切换 */
}

/* 🆕 CSS3 新增视口单位 */
.small { height: 100svh; }  /* 最小可能视口 */
.large { height: 100lvh; }  /* 最大可能视口 */

clamp() 流式排版

/* 字体在 16px ~ 32px 之间，与视口宽度关联 */
h1 {
  font-size: clamp(1rem, 2.5vw + 1rem, 2rem);
}

/* 相当于 */
/* 最小 1rem → 视口小时用 2.5vw+1rem → 最大 2rem */

/* 间距流式 */
.container {
  padding: clamp(16px, 3vw, 48px);
}

min() / max()

/* 取较小值 */
.container {
  width: min(90%, 1200px);
  /* 视口 90% 和 1200px 中较小的 */
  /* → 宽屏时 1200px，手机时 90% */
}

/* 取较大值 */
.title {
  font-size: max(16px, 2vw);
}

打印样式

@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: black; }
  a[href]::after { content: " (" attr(href) ")"; }
}

小结

技巧	代码
移动端全屏	100dvh
流式字体	clamp(1rem, 2.5vw, 2rem)
自适应宽度	min(90%, 1200px)
打印优化	@media print

上一节：容器查询 下一节：自定义属性（CSS 变量）

贡献者: 布欧-Lewyon