视口的相对单位

date
Mar 17, 2023
slug
deepcss-relative-unit
status
Published
tags
深入解析CSS
summary
CSS Relative unit
type
Post
​ 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具 栏、状态栏。
  • vh:视口高度的 1/100。
  • vw:视口宽度的 1/100。
  • vmin:视口宽、高中较小的一方的 1/100
  • vmax:视口宽、高中较大的一方的 1/100
​ 50vw 等于视口宽度的一半,25vh 等于视口高度的 25%。vmin 取决于宽和高中较小的 一方,这可以保证元素在屏幕方向变化时适应屏幕。在横屏时,vmin 取决于高度;在竖屏时, 则取决于宽度。

使用vw定义字号

font-size:2vw;
在一个 1200px 的桌面显示器上,计算 值为 24px(1200 的 2%)。
在一个 768px 宽的平板上,计算值约为 15px(768 的 2%).

使用 calc()定义字号

font-size: calc(0.5em + 1vw);
0.5em 保证了最小字号,1vw 则确保 了字体会随着视口缩放。

© shallrise 2025