你可能还不知道 CSS3 的 rem 字体大小

2022-12-30 0 937

在Web中采用什么基层单位来表述网页的调色板,至那时年末都还在惨烈的争辩着,没人说PX作为基层单位好,没人说EM缺点多,还没人在说比率方便快捷,以致于出现了CSS Font-Size: em vs. px vs. pt vs. percent这种的PK全局。意外的是,依然有相同的异同,使各式各样控制技术都不太平庸,但又难以JGD5用。啊进也难,退也难呀。

前段时间在自学 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 ? */}

为什么 li 的 1.4em 是不是 14px 将是两个问号呢?如果你了解过 em 后,你会觉得那个难题是多问的。后面也简单的如是说过正中下怀,在采用“em”作基层单位时,一定需要知道其父元素的增设,因为“em”是两个相对值,而且是两个相对父元素的值,其真正的计算公式是:

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

这种的情况下 1.4em 可以是 14px,也可以是 20px,或者说是 24px,总之是两个不确定值,那么化解这种的难题,要么你知道其父元素的值,要么呢在任何子元素中都采用 1em。这种一来可能又不是他们所需要的方式。

这儿我只是简单的如是说了两个这两个基层单位的采用,具体一点儿的我们可以参阅:

Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percentConverting px into percentage and em for relative CSS font sizesEm Vs Percent WidthsCSS: Units of MeasurementJennifer KyrninUsing Points, Pixels, Ems, or Percentages for CSS Fonts

Rem 为基层单位

CSS3的出现,他同时引进了一些新的基层单位,包括他们那时所说的rem。在W3C官网上是这种描述rem的——“font size of the root element”。下面他们就一起来详尽的了解rem

后面说了 em 是相对其父元素来增设手写体大小的,这种就会存有两个难题,进行任何元素增设,都有可能需要知道他父元素的大小,在他们多次采用时,就会带来难以预知的错误风险。而rem是相对根元素<html>,这种就意味着,他们只需要在根元素确定一个参考值,在根元素中增设多大的手写体,这完全可以根据您自己的需,我们也可以参考下图:

你可能还不知道 CSS3 的 rem 字体大小

他们来看两个简单的代码实例:

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}body {font-size: 1.4rem;/*1.4 × 10px = 14px */}h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素 <html> 中表述了两个基本调色板为 62.5%(也是 10px。增设那个值主要方便快捷计算,如果没有增设,将是以 16px 为基准 )。从上面的计算结果,他们采用 rem 就像采用 px 一样的方便快捷,而且同时化解了 px 和 em 两者相同之处。

应用程序的兼容性

remCSS3新引进来的两个度量基层单位,我们心里肯定会觉得心灰意冷呀,担心应用程序的支持情况。其实我们不用害怕,你可能会惊讶,支持的应用程序还是蛮多的,比如:Mozilla Firefox 3.6+Apple Safari 5+Google ChromeIE9+Opera11+。只是可怜的IE6-8难以,你们就把他们当透明了吧,我向来都是如此。

不过采用基层单位增设手写体,可不能完全不考虑IE了,如果你想采用那个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起采用,用”px”来实现IE6-8下的效果,然后采用 Rem 来实现代应用程序的效果。就让IE6-8不能随文字的发生改变而发生改变吧,谁让那个Ie6-8这么老呢?我们不仿试试,还蛮有意思,说不定那个是主流的度量基层单位了。

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务