css单位的分类、区别与用处

来源

链接: w3school—CSS 单位
链接: CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）

CSS单位的分类

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

单位	描述
cm	厘米
mm	毫米
in	英寸（1in=96px=2.54cm）
px	像素（1px=1/96th of 1in）
pt	点（1pt=1/72 of 1in）
pc	派卡（1pc=12pt）

相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位	描述
em	相对于父元素的字体大小（font-size）（2em表示当前字体大小的2倍）
ex	相对于当前字体的x-height（极少使用）
ch	相对于“0”（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	相对于视窗*宽度的1%
vh	相对于视窗*高度的1%
vmin	相对于视窗*较小尺寸的1%
vmax	相对于视窗*较大尺寸的1%
%	相对于父元素

区别

rem与em的区别

em和em都是相对单位，主要参考的标签不同：

• rem是相对于根字号，即相对于标签的font-size实现的，浏览器默认字号是font-size:16px
• em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的

vw、vh 与 % 百分比的区别

• % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
• vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

vmax与vmin的区别

• vmax：取当前vw,vh中的最大值，换句话说就是，将窗口最大的一边分为100份，每1vmax是视图窗口最大的一边的1/100。
• vmin：取当前vw,vh中的最小值，换句话说就是，将窗口最小的一边分为100份，每1vmin是视图窗口最小的一边的1/100。

用处

vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

vh的用法之一 容器滚动条

当盒子的宽高设置了vh和vw后, 并把盒子设置overflow: auto; 就会发现浏览器可视变化,盒子也会变化的效果，再添加个隐藏滚动条::-webkit-scrollbar {display: none;}

      .i {
            width: 100vw;
            height: 10vh;
            background-color: gray;
        }

        .box {
            width: 30vw;
            height: 30vh;
            background-color: red;
            overflow: auto;
        }

        ::-webkit-scrollbar {
            display: none;
        }