學(xué)習(xí)淘寶移動(dòng)端實(shí)現(xiàn)時(shí)兼都，發(fā)現(xiàn)的布局單位嫂沉。
視口單位(Viewport units)
什么是視口？?
在PC端扮碧，視口指的是在PC端趟章，指的是瀏覽器的可視區(qū)域；
而在移動(dòng)端芬萍，它涉及3個(gè)視口：Layout Viewport（布局視口）尤揣，Visual Viewport（視覺(jué)視口），Ideal Viewport（理想視口）柬祠。
視口單位中的“視口”北戏，PC端指的是瀏覽器的可視區(qū)域；移動(dòng)端指的就是Viewport中的Layout Viewport漫蛔。
根據(jù)CSS3規(guī)范嗜愈，視口單位主要包括以下4個(gè)：
? ? ? 1.vw：1vw等于視口寬度的1%旧蛾。
? ? ? 2.vh：1vh等于視口高度的1%。
? ? ? 3.vmin：選取vw和vh中最小的那個(gè)蠕嫁。
? ? ? 4.vmax：選取vw和vh中最大的那個(gè)锨天。
?vh and vw：相對(duì)于視口的高度和寬度，而不是父元素的（CSS百分比是相對(duì)于包含它的最近的父元素的高度和寬度）剃毒。1vh 等于1/100的視口高度病袄，1vw 等于1/100的視口寬度。
比如：瀏覽器高度950px赘阀，寬度為1920px, 1 vh = 950px/100 = 9.5 px益缠，1vw = 1920px/100 =19.2 px。
vmax相對(duì)于視口的寬度或高度中較大的那個(gè)基公。其中最大的那個(gè)被均分為100單位的vmax幅慌。
vmin相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vmin轰豆。
vh/vw與%區(qū)別胰伍？
請(qǐng)看下面簡(jiǎn)單的栗子：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>VW&VH</title>
</head>
<style>
? ? * {
? ? ? ? padding: 0;
? ? ? ? margin: 0
? ? }
? ? .left {
? ? ? ? float: left;
? ? ? ? width: 50vw;
? ? ? ? height: 20vh;
? ? ? ? background-color: blue;
? ? ? ? text-align: center;
? ? ? ? line-height: 20vh;
? ? ? ? font-size: 3rem
? ? }
? ? .right {
? ? ? ? float: right;
? ? ? ? width: 50vw;
? ? ? ? height: 20vh;
? ? ? ? background-color: green;
? ? ? ? text-align: center;
? ? ? ? line-height: 20vh;
? ? ? ? font-size: 3rem
? ? }
</style>
<body>
? ? <div class="left">left</div>
? ? <div class="right">right</div>
</body>
</html>
兼容性問(wèn)題(在移動(dòng)端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持)
