深入解析CSS第二章视口的相对单位——读书笔记

2.4 视口的相对单位

• 相对于浏览器视口定义长度的视口的相对单位
• 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。
• vh：视口高度的1/100。
• vw：视口宽度的1/100。
• vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
• vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax
• 50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。
• 视口相对长度非常适合展示一个填满屏幕的大图。我们可以将图片放在一个很长的容器里，然后设置图片的高度为100vh，让它等于视口的高度。

---

使用vw定义字号

• 给一个元素加上font-size，在一个1200px的桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板上，计算值约为15px（768的2%）。这样做的好处在于元素能够在这两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。
• 不幸的是，24px在大屏上来说太大了。更糟糕的是，在iPhone 6上会缩小到只有7.5px。如果能够保留这种缩放的能力，但是让极端情况缓和一些就更棒了。CSS的calc()函数可以提供帮助。

---

使用calc()定义字号

• calc()函数内可以对两个及其以上的值进行基本运算
• 加号和减号两边必须有空白，因此我建议大家养成在每个操作符前后都加上一个空格的习惯，比如calc(1em + 10px)
• 0.5em保证了最小字号，1vw则确保了字体会随着视口缩放