CSS计量单位

em可以精确定义某个元素的大小，因此它特别适合在页面排版中定义大段文字区域的大小，或者相对于某个元素定义其它元素的大小。但em的缺点在于，它需要知道父节点的大小，因此当开发者在编写代码时，尤其是嵌套很深的情况下，很难计算出其准确的尺寸，容易造成尺寸异常等问题。

四、rem

rem的全称是root em，它和em的计算方式类似，但是相对的标准是根元素的字体大小，这里的根元素指的是元素。使用rem的好处在于，网页在根元素的字体大小变化时，整个页面都可以按比例变化，可适应不同分辨率、不同设备。CSS3开始支持rem单位，越来越多的前端企业在使用rem。

rem和em适用的情况类似，但rem不孕育继承问题，而且在设置字体时，它所经历的层次比较浅，更易于控制。而且rem可以简化样式的设置流程，任何元素的大小都可以使用同一套rem规则制定。

五、视口宽度（vw）和视口高度（vh）

相比于以前的计量单位，vw和vh单位是相对较新的单位。其中vw代表视口宽度的 1/100，vh代表视口高度的1/100。它们的运用使得设备的物理尺寸和屏幕尺寸的无关，而是将其尺寸与视口的尺寸挂钩。当视口大小发生变化时，元素的尺寸以相应比例发生变化。

vw和vh通常用来使得网页在不同尺寸的显示器显示时自适应，并且它也十分适合做桌面应用的响应式设计。同时使用这些单位也可能会增加代码的可读性，但也要注意根据视口大小和屏幕分辨率灵活使用适当的布局。

总结

CSS中有多种计量单位，在选取计量单位时，需要综合考虑元素尺寸、排版布局、屏幕分辨率、字体大小等因素。设计稿中常用的单位是像素和em。而rem和vw、vh等计量单位，适用于响应式设计，可以随父级字体大小，或视口大小进行对页面元素的字体和布局进行自适应的设置。在开发过程中，开发者也可根据需求进行适当结合运用。

代码示例：

    <style>
    .box {
        width: 200px;
        height: 200px;
        font-size: 16px;
        line-height: 1.5;
        padding: 10px;
        margin: 20px;
        border: 2px solid #000;
        background-color: #ccc;
    }
    .box1 {
        width: 50%;
        height: 100px;
        margin: 20px 0;
    }
    .box2 {
        width: 8em;
        height: 8em;
        margin: 20px 0;
    }
    .box3 {
        width: 10rem;
        height: 10rem;
        margin: 20px 0;
    }
    .box4 {
        width: 50vw;
        height: 50vh;
        margin: 20px 0;
    }
</style>
<div class="box">像素单位示例</div>
<div class="box1">百分比单位示例</div>
<div class="box2">em单位示例</div>
<div class="box3">rem单位示例</div>
<div class="box4">vw,vh单位示例</div>