From: https://mp.weixin.qq.com/s/G7ZYCiO__4g2LjRuNl32Ew

響應式布局的單位我們第一時間會想到通過rem單位來實現(xiàn)適配，但是它還需要內(nèi)嵌一段腳本去動態(tài)計算跟元素大小。?
比如：

(function (doc, win) {

?let docEl = doc.documentElement

?let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

?let recalc = function () {

? ?var clientWidth = docEl.clientWidth

? ?if (!clientWidth) return

? ?docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'

?}

?if (!doc.addEventListener) return

?win.addEventListener(resizeEvt, recalc, false)

?doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

那有沒有一個單位不需要JS和CSS耦合在一起的單位？答案是有的，就是vw／vh。

vw = view width

vh = view height

這兩個單位是CSS3引入的，以上稱為視口單位允許我們更接近瀏覽器窗口定義大小。

視口單位(Viewport units)

Q：什么是視口？?
A：Peter-Paul Koch（”PPK大神”）提出視口的解釋是：在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區(qū)域；而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。

視口單位中的“視口”，桌面端指的是瀏覽器的可視區(qū)域；移動端指的就是Viewport中的Layout Viewport。

vh/vw與%區(qū)別

?

單位解釋

vw	1vw = 視口寬度的1%
vh	1vh = 視口高度的1%
vmin	選取vw和vh中最小的那個
vmax	選取vw和vh中最大的那個

?

比如：瀏覽器視口尺寸為370px,那么 1vw = 370px * 1% = 6.5px(瀏覽器會四舍五入向下取7)

vh/vw與%區(qū)別在于，

單位依賴于

%	元素的祖先元素
vh/vw	視口的尺寸

兼容性問題

在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持。

運用

僅使用vw作為CSS單位

使用 vw 單位作為唯一應用的一種 CSS 單位的這種做法下

1.根據(jù)設計稿的尺寸轉換為vw單位(SASS函數(shù)編譯)

//iPhone 6尺寸作為設計稿基準

$vm_base: 375;

@function vm($px) {

? ?@return ($px / 375) * 100vw;

}

2.無論是文本還是布局高寬、間距等都使用 vw

<div class="mod_nav">

?<nav class="mod_nav_list" v-for="n in 5">

? ?<a href="#" class="mod_nav_list_item">

? ? ?<span class="mod_nav_list_item_logo">

? ? ? ?<img src="http://jdc.jd.com/img/80">

? ? ?</span>

? ? ?<p class="mod_nav_list_item_name">導航入口</p>

? ?</a>

?</nav>

</div>

.mod_nav {

? ?background: #fff;

? ?&_list {

? ? ? ?display: flex;

? ? ? ?padding: vm(15) vm(10) vm(10);

? ? ? ?&_item {

? ? ? ? ? ?flex: 1;

? ? ? ? ? ?text-align: center;

? ? ? ? ? ?font-size: vm(10);

? ? ? ? ? ?&_logo {

? ? ? ? ? ? ? ?display: block;

? ? ? ? ? ? ? ?margin: 0 auto;

? ? ? ? ? ? ? ?width: vm(40);

? ? ? ? ? ? ? ?height: vm(40);

? ? ? ? ? ? ? ?img {

? ? ? ? ? ? ? ? ? ?display: block;

? ? ? ? ? ? ? ? ? ?margin: 0 auto;

? ? ? ? ? ? ? ? ? ?max-width: 100%;

? ? ? ? ? ? ? ?}

? ? ? ? ? ?}

? ? ? ? ? ?&_name {

? ? ? ? ? ? ? ?margin-top: vm(2);

? ? ? ? ? ?}

? ? ? ?}

? ?}

}

會得到這樣的效果：

最優(yōu)做法——搭配vw和rem

使用vm作為css單位代碼量確實減少很多，但是你會發(fā)現(xiàn)它是利用視口單位實現(xiàn)，依賴于視口大小而自動縮放，失去了最大最小寬度的限制。

所以，我們需要結合rem單位來實現(xiàn)布局，而rem正好可以動態(tài)改變根元素大小，做法是：

給根元素大小設置vw–動態(tài)改變大小。

限制根元素font-size的最大最小值，配合bosy加上最大最小寬度。

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推

$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準值

@function rem($px) {

? ? @return ($px / $vm_fontsize ) * 1rem;

}

// 根元素大小使用 vw 單位

$vm_design: 750;

html {

? ?font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;

? ?// 同時，通過Media Queries 限制根元素最大最小值

? ?@media screen and (max-width: 320px) {

? ? ? ?font-size: 64px;

? ?}

? ?@media screen and (min-width: 540px) {

? ? ? ?font-size: 108px;

? ?}

}

// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小

body {

? ?max-width: 540px;

? ?min-width: 320px;

}

總結

以上是生活随笔為你收集整理的vh,vw单位你知道多少？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。