CSS视口单位及长度单位

CSS长度单位

绝对长度单位

绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。

• in------英寸
• cm------ 厘米
• mm-----毫米
• pt -----点(Point)，指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。
• pc-------派卡(Pica)，绝对长度单位

相对长度单位

其长度单位会随着它的参考值的变化而变化。

• px-------像素。代表屏幕中每个「点」（pixel）。
• em-------元素的字体高度。每个子元素透过「倍数」乘以父元素的px值。
• %-------百分比。每个子元素透过「百分比」乘以父元素的px值。
• rem-------每个元素透过「倍数」乘以根元素的px值。
• vm------这个单位表示视口的高度。1vh等于视口高度的1%。
• vw------这个单位表示视口的宽度。1vm等于视口宽度的1%；
• vmin------- 这个单位表示视口的更小尺寸。如果视口高度小于宽度，1vmin等于视口高度1%。同样，如果宽度小于高度，1vmin代表视口宽度1%。
• vmax------这个单位表示视口的更大尺寸。如果视口高度大于宽度，1vmax等于视口高度1%。同样，如果宽度大于高度，1vmax代表视口宽度1%。

认识视口单位（ Viewport units )

在桌面端，视口指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

px（像素）

px单位的名称为像素，是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。

        <!-- px像素 -->
        <h1>px</h1>
        <div style="font-size: 16px;">16px
            <div style="font-size: 20px;">
                16px
                <div style="font-size: 24px;">
                    16px
                    <div style="font-size: 28px;">
                        16px
                    </div>
                </div>
            </div>
        </div>

em（相对长度单位）

em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。

        <!-- em字体单位 -->
        <h1>em</h1>
        <div style="font-size: 1.6em;">
            <!-- 字体大小为16px*1.6 -->
            1.6em
            <div style="font-size: 1.6em;">
                <!-- 字体大小为16px*1.6*1.6 -->
                1.6em
                <div style="font-size: 1.6em;">
                    <!-- 字体大小为16px*1.6*1.6*1.6 -->
                    1.6em
                    <div style="font-size: 1.6em;">
                        <!-- 字体大小为16px*1.6*1.6*1.6*1.6 -->
                        1.6em
                    </div>
                </div>
            </div>
        </div>

rem

rem是相对单位，为每个元素透过“倍数”乘以根元素的px值，是相对于字体大小的html元素，也称为根元素。

        <!-- rem字体单位 -->
        <h1>rem</h1>
        <div style="font-size: 16px;">
            <!-- 字体大小为16px -->
            16px
            <div style="font-size: 1.6rem;">
                <!-- 字体大小为16px*1.6 -->
                1.6rem
            </div>
        </div>

%

%百分比是相对单位，和em类似，都是相对于父级元素。

        <!-- % -->
        <h1>%</h1>
        <div style="font-size:160%;">
                <!-- 字体大小为16px*1.6 -->
                160%
            <div style="font-size:160%;">
                <!-- 字体大小为16px*1.6*1.6 -->
                160%
                <div style="font-size:160%;">
                    <!-- 字体大小为16px*1.6*1.6*1.6 -->
                    160%
                    <div style="font-size:160%;">
                        <!-- 字体大小为16px*1.6*1.6*1.6*1.6 -->
                        160%
                    </div>
                </div>
            </div>
        </div>

vw和vh

vw和vh是视口（viewport units）单位，是根据浏览器窗口的大小的单位，不受显示器分辨率的影响，使用过程中不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh

vh是可视窗口的高度,与vw一样，如果浏览器的高是900px,1vh求得的值为9px。

vmin和vmax

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
eg：浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px
eg: 浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px

• vmin取宽度高度两者更小者/100
• vmax取宽度高度两者更大者/100

视口单位应用场景

1. 响应式布局
   由于vw，vh的特性，能够根据窗口大小来自动调节字体大小，这就能很轻松地实现响应式页面的布局。
2. 响应垂直居中

        /* vh和vw居中 */
        #box { 
            width: 50vw; 
            height: 50vh; 
            margin: 25vh auto; 
            background-color: pink;
        }

总结

在响应式布局的中可以使用视口单位，相对于像素值和其他单位来说，很适用于响应式布局，但是视口单位也存在不足，当可视窗口过小的时候，字体使用视口单位的话，可能会使字体不清等，所以在响应式布局中，可以使用rem和视口单位一起使用。