CSS3的REM设置字体大小

时间 2020-06-28

标签 css3 css rem 设置字体大小栏目 CSS 繁體版

原文原文链接

　　在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX作为单位好，有人说EM优势多，还有人在说百分比方便，以致于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不一样的利弊，使各类技术都不太理想，但又没法不去用。真是进也难，退也难呀。
　　
　　最近在学习em的相关知识的时候，无心之间让我拾得一宝，就是使用rem来设置Web页面的字体大小。让我一会儿就来劲了，一口气看完并测试了一回，还真是爽歪歪的呀。师傅说好东西不能吃独食，于我就在这里给你们吹吹这个从没见过的REM。
　　
　　在详细介绍rem以前，咱们先一块儿来回顾一下咱们经常使用的两种记量单位，也是备受争论的两个：
　　
　　PX为单位
　　
　　EM为单位
　　
　　PX为单位
　　
　　在Web页面初期制做中，咱们都是使用“px”来设置咱们的文本，由于他比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，他改变了浏览器的字体大小，这时会使用咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲，就是一个大问题了。所以，这时就提出了使用“em”来定义Web页面的字体。
　　
　　em为单位
　　
　　前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，咱们可使用“em”单位。Richard Rutter'在《How to size text using ems》一文中有作过详细的介绍，追至早一点，Richard Rutter也在《How to Size Text in CSS》中进行过深刻的剖析。
　　
　　这种技术须要一个参考点，通常都是以<body>的“font-size”为基准。好比说咱们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，咱们设置字体大小至关于“14px”时，只须要将其值设置为“1.4em”。浏览器

body {
　　font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/
}
h1 {
　　font-size: 2.4em; /2.4em × 10 = 24px /
}
p {
　　font-size: 1.4em; /1.4em × 10 = 14px /
}
li {
　　font-size: 1.4em; /1.4 × ? = 14px ? /
}ide

　为何"li"的"1.4em"是否是“14px”将是一个问号呢？若是你了解过“em”后，你会以为这个问题是多问的。前面也简单的介绍过一回，在使用“em”做单位时，必定须要知道其父元素的设置，由于“em”就是一个相对值，并且是一个相对于父元素的值，其真正的计算公式是：

 1 ÷ 父元素的font-size × 须要转换的像素值 = em值

这样的状况下“1.4em”能够是“14px”,也能够是“20px”，或者说是“24px”，总之是一个不肯定值，那么解决这样的问题，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。这样一来可能又不是咱们所须要的方法。布局