讲 3 个我这几天刚刚遇到的 CSS 里的小技巧

时间：2026-4-21 00:13 作者：独元殇 分类： 前端技术

今天水文一篇，就讲 3 个，我这几天刚刚遇到的 CSS 里的小技巧吧。

大家如果想试一下的话，可以在我做的这个 HTML 编辑器里进行实时编辑预览：

分格 HTML 编辑器 www.ccgxk.com/cellhtmleditor.html

第一个、流体排版

首先是一个文字排版里的大小里【流体排版】的概念。可能用的不多，但这个是我最喜欢的 CSS 技巧之一。

举个例子，让 clamp()+calc()实现 16-24px 根字体流体排版。

这是一个很经典的技巧，可以让文字随着屏幕的大小变化，逐渐的变小变大，丝滑无卡顿。

<style>
  :root { font-size: clamp(16px, 1.2vw + 12px, 24px); }
  h1 { font-size: 3rem; }
  p { font-size: 1.2rem;}
</style>

<section>
  <h1>流体排版演示</h1>
  <p>请尝试左右拉伸浏览器窗口，文字大小会像液体一样平滑缩放，而不会突然发生跳变。</p>
</section>

效果如下：

原理很简单，CSS 里的 clamp 是定上下限，文字大小在之间，然后 VW 提供一个参考值。

第二个、更安全的 100% 屏幕大小占比法

以前我们写一个内容，完全把屏幕占全，是这样写的：

.test {
    height: 100vh;
    width: 100vw;
}

但，你知道，兼容性很差！不是产生滚动条，就是内容没填充完。

后来，人们摸索出的一个更好的、安全的一个写法是：

.test {
    min-height: 100vh;
    width: 100%;
}

这样就不会乱出一些故障，100% 可用了。

第三个、移动端安全边距

如果你需要做移动端的页面适配的话，这个知识点你是一定要知道的。

就是大名鼎鼎的 env(safe-area-inset-*)函数！

当然，生效的前提是得在 meta 里面声明 viewport-fit=cover 。

然后写，比如 env(safe-area-inset-bottom)：这是浏览器提供的 CSS 环境变量，自动获取当前设备底部“小白条”的高度。加上 padding-bottom 后，导航栏的内容就会被安全地向上推，避免被系统手势遮挡。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <style>
    .bottom-tab-bar {
      position: fixed; bottom: 0; left: 0; width: 100%;
      background: #ccc;
      height: 50px;
      padding-bottom: env(safe-area-inset-bottom, 15px);
      display: flex; align-items: center; justify-content: space-around;
    }
  </style>
</head>
<body>
  <nav class="bottom-tab-bar">
    <a href="#" class="tab">首页</a>
    <a href="#" class="tab">发现</a>
    <a href="#" class="tab">我的</a>
  </nav>
</body>
</html>

显示效果如下：

这样，移动端的下方内容就不会和我们内容进行冲突了。如果设置的是 top ，那就是各种稀奇古怪的刘海屏，不会和我们进行冲突了。

标签: 原创 css