虛擬寬度，虛擬高度，％

請在什麼情況下，我應該使用vh，vw而不是css中的百分比或px。虛擬寬度，虛擬高度，％

width:100%;height:100%;

或

width:100vw;height:100vh;

這是可取的，爲什麼呢？

來源

2017-07-27 Lekens

[CSS單元 - vh/vw和％？之間的區別是什麼]的可能重複（https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh -vw-and） –

v代表_viewport_，只是供參考，但因爲它代表這個問題太寬泛或基於觀點。 – chazsolo

@chazsolo我提供了一個答案，解釋了它與codepen鏈接的一些用途。讓我知道如果你覺得它有幫助:) – Farbs

能夠使用視口相對單元的好處可能是字體大小。當使用vws或vhs時，單位與視口相關，而不像其他CSS單元那樣相對於父視圖或根。

em =相對於父母rem =相對於根vw =相對於視口寬度vh =相對於視口高度％=相對於父母。

因此，如果您想讓字體大小爲視口寬度的10％，而無需在ems，rems或像素中進行計算，則可以簡單地聲明font-size：10vw。

由於百分比是相對於父容器的百分比和百分比不一樣。如果將div設置爲寬度：寬度爲1400px的窗口中設置爲1200px的容器內的50％，則div將爲600px寬（1200 * 50％）。但是，使用vws時，寬度將爲視口大小的50％，因此爲700px（1400px * 50％）。我用這個代碼來說明不同之處。

http://cdpn.io/fIJeB

希望幫助！

來源

2017-07-27 18:32:43 Farbs

虛擬寬度，虛擬高度，％

回答

相關問題