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

html-css025

如何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

最简单的 就是给你看下原理 你可以自己修改

<span style="font-size:16px" onclick="this.style.fontSize=(parseInt(this.style.fontSize.replace('px',''))+2)+'px'">单击放大文字</span>

顺便说明parseInt是把字符串变数字 replace是把取得的css属性里的px去掉 原css里字体大小使用font-size控制 在js里对这种中间有横杠的都需要把横杠去掉并把第二个单词的首字母大写

css设置div宽高按照10/1显示，无论这个div的宽怎么变化，div的高都会是宽的十分之一，这就是 aspect-ratio 的作用，例如下面这个例子

假如说div的内容已经高于div显示的高度，那么div会根据内容的高度来显示，也就是说最小高度是宽度的十分之一，最高的就是按照内容的高度走

假如说就想跟着比例走，即使内容超出比例的高度，那该怎么做呢？很简单，加上 min-height:0 就可以了，这样就可以让高度不根据内容计算了，而是固定的数值

如果我们同时设置width和height，则aspect-ratio就不起作用了，就完全按照width和height设置的值显示

假如我们设置了最大的宽度时300px，因为是块状元素，宽度是展开一行的，并且高度是按照比例走的，那么高度就是30px

假如我们在标签上用width或者height属性， aspect-ratio 的优先级也是低的，例如:

最后结果还是按照标签属性上的width和height显示宽高，而不是 aspect-ratio 设置的1/1比例

综上所述， aspect-ratio 的优先级是最低的，不过确实好用