今天水文一篇，就讲 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 提供一个参考值。
以前我们写一个内容，完全把屏幕占全，是这样写的：
.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 ，那就是各种稀奇古怪的刘海屏，不会和我们进行冲突了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。