CSS计量单位

开发前端页面离不开样式的设置，而样式的设置离不开计量单位的应用。在CSS中一共有五种类型的计量单位：像素（px）、百分比（%）、ems、rem、视口宽度（vw）和视口高度（vh）。不同的计量单位在不同的应用场景下，可以发挥出其优势。下文将对前端开发中常用的几种计量单位进行详细介绍。

一、像素（px）

在CSS中，像素是最常用的一种计量单位。像素是最基本的物理计量单位，指的是显示器上的一个小点。计算机显示器分辨率越高，每英寸上的像素点就越多，显示效果也就越细腻。一个像素在Web页面上的大小是由显示器的分辨率来决定的，所以当设计师在设计Web页面时使用像素单位，设计出来的页面在不同分辨率的显示器上，看起来就会不同。

像素单位的好处在于它们是一致、精确的，并且不受其他因素的影响。如果你需要知道一个容器或元素的确切大小，那么像素单位是最好的选择。但使用像素单位的缺点在于，不同显示器尺寸和分辨率的设备上，同一像素尺寸所对应的物理尺寸可能会相差很大，导致用户体验存在较大的差异。

二、百分比（%）

百分比是指相对于所属容器大小的百分比。相对于父元素的百分比，是相对于最近具有定位的祖先元素的百分比，如果都没有则是相对于body元素的百分比。百分比单位的好处在于，他们可以自适应浏览器窗口或父元素尺寸的变化。当我们设置一个元素的宽度为50%时，它会占用其父元素50%的宽度。

百分比易于理解，但和像素不一样的是，它是相对于其父元素而言的。它的优点在于它会随着父容器的尺寸变化而变化，因此使用百分比计算尺寸时不容易出错，可以适配更多屏幕分辨率。但同时缺点是难以根据绝对长度进行操作和确定，如果系数不准确，则会导致元素边界不符合设计意图。

三、ems

em是一个极有用的计量单位，它指定元素字体的大小和行高，随着字体大小而变化。1em等于元素父元素中的字体大小。完整的定义是，在定义字体大小时，1em等于该元素之前所有父元素中的字体大小，即在继承链中的前一个字体大小。例如，如果某个的字体大小定义为2em，那么其大小就是其父元素字体大小的两倍。这种相对于父元素字体大小的计量方式，可以很好的根据浏览器定制的字体大小进行缩放。

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>

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192438.html