CSS3用rem,em,px设置字体大小

时间 2019-11-17

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

原文原文链接

PX为单位

相对长度单位。像素px是相对于显示器屏幕分辨率而言的。css

在Web页面初期制做中，咱们都是使用“px”来设置咱们的文本，由于他比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，他改变了浏览器的字体大小，这时会使咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲，就是一个大问题了。所以，这时就提出了使用“em”来定义Web页面的字体。html

PX特色css3

1. IE没法调整那些使用px做为单位的字体大小；浏览器

2. 国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位；布局

3. Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)。字体

em为单位

相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。网站

前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，咱们可使用“em”单位。
spa

任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。htm

为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只须要将你的原来的px数值除以10，而后换上em做为单位就好了。对象

这种技术须要一个参考点，通常都是以<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”就是一个相对值，并且是一个相对于父元素的值，

其真正的计算公式是：1 ÷ 父元素的font-size × 须要转换的像素值 = em值

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

EM特色

1. em的值并非固定的；

2. em会继承父级元素的字体大小。

Rem为单位

rem是相对于根元素<html>，这样就意味着，咱们只须要在根元素肯定一个参考值，，在根元素中设置多大的字体，这彻底能够根据您本身的需，你们也能够参考下图：

咱们来看一个简单的代码实例：

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”二者不一样之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。

不过使用单位设置字体，可不能彻底不考虑IE了，若是你想使用这个REM，但也想兼容IE下的效果，你可考虑“px”和“rem”一块儿使用，用"px"来实现IE6-8下的效果，而后使用“Rem”来实现代浏览器的效果

长度单位	版本	描述
文本相对长度单位 Font-relative Length Units
em	CSS1	相对于当前对象内文本的字体尺寸
ex	CSS1	相对于字符“x”的高度。一般为字体高度的一半
ch	CSS3	数字“0”的宽度
rem	CSS3	相对于根元素(即html元素)font-size计算值的倍数
视口相对长度单位 Viewport-relative Length Units
vw	CSS3	相对于视口的宽度。视口被均分为100单位的vw
vh	CSS3	相对于视口的高度。视口被均分为100单位的vh
vmax	CSS3	相对于视口的宽度或高度，老是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vmin	CSS3	相对于视口的宽度或高度，老是相对于小的那个。视口的宽度或高度被均分为100单位的vmin
绝对长度单位 Absolute Length Units
cm	CSS1	厘米
mm	CSS1	毫米
q	CSS3	1/4毫米（quarter-millimeters）; 1q = 0.25mm
in	CSS1	英寸（inches）; 1in = 2.54cm
pt	CSS1	点（points）; 1pt = 1/72in
pc	CSS1	派卡（picas）; 1pc = 12pt
px	CSS1	像素（pixels）; 1px = 1/96in