标签 CSS 下的文章

一、前言

在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢?这个问题引发了各种各样不同的争论和评价。想要找到一个比较权威的回答可能比较困难,因为这个问题比较难回答。

PS: 半年前只翻译啦一半,半夜打开一看原文突然就想把剩下的翻译啦~里面有一些自己的观点描述,如果有错误请您留言给我,一定修正。

二、合适的单位

"Ems"(em): "em"是被用于网页文件媒介的可缩放的单位(即相对单位)。1em就等于当前字体的大小,举个例子来讲,如果文档中字体的大小为12pt,那么1em = 12pt。Ems拥有能够缩放的特点,所以2em = 24pt,0.5em = 6pt(你也可以使用原文中的.5em,但是我觉得0.5em的可读性更好)等等。

Pixels(px): 像素是被用于屏幕媒介(在计算机屏幕上读取)的固定大小的单位(即绝对单位)。1像素表示电脑屏幕中的1个点(这是你的屏幕能够识别的最小单位)。在设计网页的时候,很多web设计者采用像素,因为它能够很精确的在浏览器中渲染网页。但是,使用像素作为单位,当近视的用户(或者视力不好的用户)放大正在浏览的网页或者在移动端缩小网页到合适的尺寸,都会呈现一些问题。

Points(pt): Points是一直以来被用于打印媒介(打印在纸上等等)。1pt = 1/72英寸。Points和Pixels比较像,它们都是固定大小和不能缩放的单位。

Percent(%): 百分比单位和"em"单位很像,但是存在着细微的不同。首先也是最重要的不同,就是在font-size = 100%(比如:12pt = 100%)的时候。当使用百分比单位,你的文本完全能在移动端正常访问。

- 阅读剩余部分 -