[分享]css单位是标准单位的是

 CSS是现代网页设计必不可少的一部分。它是一种样式语言，用于定义HTML文件的呈现方式。在CSS中，使用很多的单位来控制元素的大小和位置，其中像像素、EM、REM等单位都是常用的选择。虽然这些单位的...

 CSS是现代网页设计必不可少的一部分。它是一种样式语言，用于定义HTML文件的呈现方式。在CSS中，使用很多的单位来控制元素的大小和位置，其中像像素、EM、REM等单位都是常用的选择。虽然这些单位的使用十分普遍，但是“标准单位”近年来逐渐成为CSS开发者的一个热门话题。

标准单位可以简单地理解为指定一个度量尺度，并基于这个尺度来定义各种属性。在CSS的标准单位中，最流行的是viewport units，即视口单位，这种单位可以用来代替像素和EM，可以使得网页在不同尺寸的设备上，都能够呈现出合适的大小。

下面我们来详细了解一下viewport units。视口单位没的全称是Viewport-percentage lengths，分为vh、vw、vmin和vmax四种类型，分别代表视口高度、宽度、高度和宽度的百分比。比如1vh表示视口高度的1%， 1vw则相当于视口宽度的1%，可以理解为视图的长度是视口长度的多少比例。

 .box {
        width: 50vw; /* 宽度为浏览器视口宽度的50% */
        height: 30vh; /* 高度为浏览器视口高度的30% */
        font-size: 3vmax; /* 字体大小为视口宽度和高度两者中较小的3% */
        margin: 5vmin; /* 外边距为视口宽度和高度两者中较小的5% */
    } 

此外，viewport units也可以与calc函数一起使用，可以为元素指定一个相对于视口大小的和具体数值的复合长度。比如：

 .container {
        width: calc(60vw - 50px);
        padding: 3vh 2vmin;
        margin: 1vmax;
    } 

通过viewport units，我们可以更加灵活地控制元素的大小和位置，更好地适应各种设备和不同的屏幕尺寸，并且以灵活的复合长度形式，更方便地实现适配效果。

总之，CSS的标准单位，特别是viewport units，是前端开发者必须要掌握的知识，但同时也要结合实际情况进行应用，以达到更好的用户体验和更好的开发效果。