css3学习--rem终极奥秘解析及css度量单位全解密

一.css度量单位
要想了解rem这个单位的原理以及使用方法,先来了解下css所有的度量单位。很多同学不太清楚的是,在 CSS 中长度单位又分为绝对长度和相对长度。

1.绝对长度
绝对长度指的是现实世界的度量单位,CSS 支持五种绝对长度单位。

in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica

其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ,绝对长度在实际开发项目中较少使用。

2.相对长度
相对长度指的是依托其他类型的单位,同样也是五种。

em 与元素字号挂钩
ex 与元素字体的“x 高度”挂钩
rem 与根元素的字号挂钩
px 像素,与分辨率挂钩
% 相对另一值的百分比

大家平时写项目也大概能知道,em,px,和%在以往的项目的使用较频繁,而rem这个新增单位慢慢被越来越多的人使用。

3.下面我们使用一些以往常用的单位(em,px,和%)作为演示,只有了解它们的工作原理和机制,才能更好的理解rem的原理和机制。

(1)em 相对单位

//em 相对单位
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}

解析:em 是相对单位,与字号大小挂钩,会根据字体大小改变自己的大小,灵活性很高。如代码所示,这个元素设置的font-size:为15培px,也就是这个元素的1em = 15px,那它的height为2 * 15px = 30px,关键点在于,使用em这个相对单位这里的em值只与本元素的font-size相关联,而rem这个相对单位是与根元素的font-size相关联,这个后面会细讲。

(2)px 相对单位,绝对特性

//px 相对单位,绝对特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}

解析:虽然 px 也是相对单位,但由于和分辨率挂钩,导致他其实就变成一个绝对单位了,自然灵活性没有 em 高,但是使用难度较低,且大量的开发者习惯性使用它。

(3)%百分比

//%百分比
p {
margin: 0;
padding: 0;
background: silver;
font-size: 200%;
width: 50%;
}

解析:长度比较好理解,就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

二.rem使用揭秘

rem的官方描述为为font size of the root element,之前说到过em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素<html>,也就是说,我们只需要在根元素确定一个font size值,这样就可以规避无法预知父元素font size值的风险,这就是之所以使用rem取代em的原因。

html {
font-size: 100px;
}
body {
font-size: 0.18rem;  /*0.18 × 100px = 18px */
}
p {
margin: 0;
padding: 0;
background: silver;
height: 0.28rem;  /*0.28 × 100px = 28px */;
width: 50%;
}

解析:如上述代码所示,设置根元素html的font-size为100px,如果想要给body的font-size设置为18px,演算的结果就是18px % 100px = 0.18 rem;同理想要给p元素的height设置为28px,便是28px % 100px = 0.28 rem。也就是说,
10px = 1rem 在根元素(font-size = 10px(62.5%)的时候);·
100px = 1rem 在根元素(font-size = 100px(625%)的时候);
40px = 1rem 在根元素(font-size = 40px(250%)的时候);

注意: 因为chrome下最小字体大小为12px,所以不能把html的font-size设置成1px或者10px,推荐使用100px。

三.rem兼容性

rem毕竟是css3新的一个度量单位,支持的浏览器比如:Mozilla Firefox 3.6+Apple Safari 5+Google ChromeIE9+Opera11+。不出所料IE6-8无法兼容的,所以rem的适用性很有局限,大部分场景用于只在移动端展示的页面。如果你的页面还需要适配到pc端,那么就老老实实的使用px吧。

如果只是用来放在移动端的页面,别人却在pc上打开了,因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。

html {
    max-width: 580px;
    min-height: 320px;
}
    原文作者:nightZing
    原文地址: https://www.jianshu.com/p/78b48846c048
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞