在浏览器中，通常使用px(像素点)来指定元素的大小。然而，1px的大小是绝对的，这样做导致所有元素的大小都是独立计算，缺乏灵活变化的可能性。

em单位可以解决这个问题。

em

em是一种相对单位，1em的大小等于当前元素的文本尺寸。例如：

那么，此时div元素的宽度为 em x 字体大小 即 2 x 3px = 6px。

如果当前元素没有显示地声明字体大小，em在计算时则会去找其父元素的font-size值(更准确的说法是，css元素会自动继承其父元素地font-size值)。

特别的，如果在声明font-size时，使用em单位，也会去使用父元素的字体大小来计算。

借助这个特性，我们可以在HTML标签中规定字体大小(默认值16px)，同时所有元素的大小都是用em来指定。假设div1和div2平级：

这样做，div1的宽度为20px，div2的宽度为30px。此时想整体调小div1和div2的宽度，只要将root标签中的font-size调小即可。

在响应式设计中，我们可以使用媒体查询来判断用户当前的设备情况，并通过改变根字体大小，来实现不同页面的呈现。

上面的代码表示当视口宽度小于600px时，根元素的字体大小设为8px。

rem 解决em的一个问题

em属性有一个问题来源于它的继承特性，有时，某个子元素想要根据根标签的字体设置自己的大小，但是其父元素已经设置了自己的font-size属性。

那么此时计算的来源将是父元素的字体大小，为非根标签的字体大小。

此时 div1 的宽度为 10 x 2 x 2 = 40px;

div2 的宽度为 10 x 2 x 3 = 60 px;

使用rem可以解决这个问题，rem的计算来源永远是根标签的字体大小值。例如上面例子中如果div2的宽度为 width: 3rem ，那么最后的计算结果为 10 x 3 = 30px。

使用calc函数与视口单位实现更自然的自适应设计

视口单位的大小则根据目前浏览器窗口的大小进行计算，1vh等于当前窗口高度的1%，1vw等于当前窗口宽度的1%。

我们可以将:root标签中的字体大小设置为 1vw ,则字体和所有元素的大小都会因为窗口大小的改变而改变。

但是这样做的问题在于，在手机中浏览时字体和元素会变得过小，而在pc端浏览时，字体又会变得过大。如何控制极端情况呢？可以使用clac函数。

在css中，clac函数可以对两个值进行简单计算。

通过calc函数，可以确定了字体的最小值8px，有限制了字体的最大值。具体的参数可以根据情况自行调整。
需要注意calc函数中的运算符（+、-、*、/）两边必须有空格。

此时，根标签中的字体大小会根据浏览器窗口的大小自动调整，而其他元素的大小，会根据根标签中的字体大小而自动调整。再结合媒体查询对特殊情况的处理，基本的响应式设计就可以实现了。

其它的响应式设计方法

CSS中，还可以通过百分比尺寸、弹性布局(Flexbox)、CSS Grid Layout等多种方法。