视口的相对单位
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 则确保 了字体会随着视口缩放。