如何css控制字体按百分比放大缩小

html-css027

如何css控制字体按百分比放大缩小,第1张

由于字体是“有级缩放”（就像风扇的档位调节开关，只能调1档、2档、3档这些，不能1.5档，或者2.1111档等），不是“无级缩放”（就像音响上的音量旋钮，可以调到任意的位置），因此要想真正实现按百分比来缩放是不太现实的。一个变通的方法是利用css3的新长度单位rem（根元素的字体大小），其默认值是16px，那么1.5rem就是16*1.5=24px，0.75rem就是16*0.75=12px。比如font-size:1.5rem

css3中有很多新的单位，其中一个是vw 。

如果你设置 font-size:10vw就代表一个文字占屏幕宽度的10%；

如果你设置 font-size:20vw就代表一个文字占屏幕宽度的20%；

这样文字就可以随屏幕的大小而自动适应

不过这个属性ios可以兼容，安卓并不兼容。