【CSS】基于视口单位vw vh vmin vmax 以及 rem和ch

左手的ㄟ右手 2022-06-05 11:06 163阅读 0赞

## 素质N连 ##

**既然已经有了percentage值，为什么还要用基于视口单位呢？**  
因为，如果你想根据视口来调整某个元素的大小，采用percentage计算，那么得每一层父元素都使用percentage计数。但如果用基于视口单位，就省去了很多麻烦！  
**为什么不可以用js获取窗口大小，然后做css？**  
可以是可以，但是这颇有css-in-js的味道。我个人来说，不喜欢这种。并且在加载上不太符合浏览器的加载方式。我曾经尝试过把css写在js中，但是出现一个问题就是，频繁卡顿。  
**js是动态获取viewport大小，而css只是在加载时候渲染，是不是js灵活性更高？**  
非也非也。你可以用我下面给的示例试一试。怎么拖动viewport，小方块都是在屏幕中间。恰恰相反，你动态获取的viewport大小只是在加载的时候渲染，而基于viewport单位却是真正动态的。

## 基本概念 ##

如果想要一个元素的宽度为可视区域的50%，那么可以用50vw来表示。

*  vw 可视区域宽度（viewport width），总宽度100vw；
 *  vh 可视区域高度（viewport height），总高度100vh；
 *  vmin 比较可视区域宽度和高度，取小；
 *  vmax 比较…，取大；
 *  rem 相对于html的font-size 只要设置了html的font-size，其他单位就可以用rem
 *  ch 一个相对于0的大小 1ch=1英文=1数字=0.5汉字

## 示例 ##

做一个长宽均为140px的方块相对于屏幕居中。

**注意：ch单位和font-family、浏览器等有一定的关系，经过测试，有的字体，如微软雅黑在chrome浏览器上，输入6ch显示3个半汉字…但是使用宋体和cursive在Chrome上都正常。然而cursive在Firefox上却显示3个半汉字。**  
**希望大家在使用的时候，能精心调试**  
挚谢阅读。