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

csscalc()函数用于动态计算长度值;

比如下面这个,

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;

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

上一篇:css学习笔记之初识css字体样式属性


下一篇:Web 字体 font-family 再探秘