calc()函数及vmin，vmax，vh，vw的认识，在family里的实战运用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_32563571/article/details/102769424

css的calc()函数用于动态计算长度值；

比如下面这个，

font-size: calc(10px + 2vmin);

控制字体缩放。

这里的vmin（相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin）；

比如我们的视口长150mm，宽200mm，现在我们的取值就是最小的那个150mm，计算公式就是  (150*2)/100;所以2vmin

的值是3；calc(10px + 2vmin) = 13px;只是计算结果，再就是，如果值小于12px；字体大小浏览器还是取12，如果要变更小，就得用缩放transform：scale();

vmin是相对于视口最小值，那还有vmax 不用说也知道了吧；

还有vw,和vh,vw指相对于宽度，vh值相对于高度；计算公式和vmin一样，只是取值不同；

IE9仅支持使用 vm 代替vmin；

在运算符‘+’前后都有空格