响应式布局二

来源：互联网发布：mac加载字幕编辑：程序博客网时间：2024/06/05 21:10

一.px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的.这个单位应该不用多说,大家用得最多。在Web页面初期制作中，我们都是使用px来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用em来定义Web页面的字体。

二.em

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

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:

1em= 16px。

em需要一个参考点，一般都是以<body>的font-size为基准的。

比如说如果你在设定的1em=10px，这样一来，我们设置字体大小相当于14px时，只需要将其值设置为1.4em。

而em则是根据他的父级元素来定义的。

三.rem.

前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

我们可以在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以16px为基准）。从上面的计算结果，我们使用rem就像使用px一样的方便，而且同时解决了px和em两者不同之处。

0 0