热门文章
联系方式
热门文章您当前的位置:主页 > 热门文章 >

用rem设置文字大小

发布于:2019-01-04 作者:AG集&#

用px设置环亚ag娱乐下载文字大小是再正常不过的事情,比如

{:;}

随处可见的在设置width、height使用px,这也是细致稳妥的设置方法,这样做的缺点在于调整浏览器的文字大小并未影响以px为单位的文本,这对一部分用户造成了不便。

用em设置文字大小弥补了这个问题,em是一个相对单位。文字大小用em表示的情况下,可以随着浏览器字号(比如在chrome下“设置->高级设置->字号”)的变大(变小)而变大(变小),使用格式与px基本一样,比如

{:;}

以上面这个p元素为例,em的计算方式是这样的:

使用em有一个令人头疼的地方:

假设的文档结构是这样的:html>p>span,样式是这样的:

{
:;÷}
{

现在我想设置span的文字大小为12px,我需要计算12/14=85.7%

{
:}

若还要设置span里面子节点的文字大小,计算会越来越痛苦。。。

这就是该rem出现的时候了。

在CSS3中引入了rem,rem是指根元素(root element,html)的文字大小,IE9+与Firefox、Chrome、Safari、Opera等主流版本都支持。

设置过根节点的文字大小后,所有子节点的文字大小全部相对于根节点计算。比如html为10px,则1.2rem=12px,2rem=20px...以此类推。

{:;
}{:;:;
}{:;:;
}

为了兼容不支持rem的浏览器,要在设置rem的前面写上对应的px值,实现优雅降级。

http://www.bkjia.com/HTML_CSS/441338.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/441338.htmlTechArticle用px设置文字大小是再正常不过的事情,比如 { : ;} 随处可见的在设置width、height使用px,这也是细致稳妥的设置方法,这样做的缺点在于调...

本文源自: 环亚国际