400字范文,内容丰富有趣,生活中的好帮手!
400字范文 > 网页设计里的字体怎么改变rem格式? – 网络

网页设计里的字体怎么改变rem格式? – 网络

时间:2022-05-30 06:41:28

相关推荐

网页设计里的字体怎么改变rem格式? – 网络

「rem」是指根元素(rootelement,html)的字体大小,好开心的是,从遥远的IE6到版本帝Chrome他们都约好了,根元素默认的font-size都是16px。这样一个新的单位兼容性如何呢?

IE9+,Firefox、Chrome、Safari、Opera的主流版本都支持了,偶可以放肆的使用rem了。

em的计算是基于父级元素的,在实际使用中给大家的计算带来了很大的不便。所以rem的出现解救了偶这样不会算术的人,再也不用担心父级元素的font-size了,因为它始终是基于根元素(html)的。

比如默认的htmlfont-size=16px,那么偶想设置12px的文字就是:12÷16=0.75(rem)

当然,你可以引入CSS预处理工具(Sass、LESS、Stylus等)自动计算rem值,这里就不一一举例了。

但是像偶这样的懒人或者团队开发中还没有引入CSS预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。大家改变一下html的默认font-size=10px不就好计算了嘛!Likethis:

html{font-size:62.5%;/*10÷16=62.5%*/}body{font-size:12px;font-size:1.2rem;/*12÷10=1.2*/}p{font-size:14px;font-size:1.4rem;}

需要注意的是,为了兼容不支持rem的浏览器,大家需要在rem前面写上对应的px值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的font-size:100%,还是设置为font-size:62.5%,如果你引入了CSS预处理工具那么自然可以使用默认值,如果由于其他原因使用font-size:62.5%也无可厚非,完全可以在body中重置回你需要的默认font-size。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。