引用文件：
週六和同事討論問題時，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知識點吧，日後可以自己複習的時候看看。
什麼是viewport?
視窗的概念在瀏覽器端指的是瀏覽器的可視區域；而在移動端則相對複雜，它涉及到3個視口：layout viewport(布局視口),visual viewport(視覺視口)、ideal viewport(虛擬視口),在移動端指的是layout viewport
什麼是vw，vh，vmax,vmin？
vw,vh,vmax,vmin是一種視窗單位，同時也是一種相對單位；它們相對的是視窗（viewport）的大小；單位1，代表相對於視窗大小的1%；
vw:1vw代表視口寬度的1%；
vh:1vh代表視口高度的1%;
vmax:選取vw/vh中最大的乙個；
vmin：選取vw/vh中最小的乙個；
與百分比%的區別
百分比%相對於其父元素或者其祖先元素的寬度/高度；
vw/vh相對於視窗大小的寬度/高度；vw/vh的優勢在於能夠直接獲取高度，而百分比%則需要在設定body的高度
vmax、vmin的用處
在做移動端開發時，如果使用vw、vh設定字型大小時，在橫屏和豎屏情況下是不一樣大的；vmax和vmin是當前較大的vw和vh和當前較小的vw和vh，這種情況下，可以設定讓字型在橫豎屏現實的大小一樣。
相容性
pc端：
chrome：自 26 版起就完美支援（2023年2月）
firefox：自 19 版起就完美支援（2023年1月）
safari：自 6.1 版起就完美支援（2023年10月）
opera：自 15 版起就完美支援（2023年7月）
ie：自 ie10 起（包括 edge）到現在還只是部分支援（不支援 vmax，同時 vm 代替 vmin）
移動端：
andriod:自4.4版起就完美支援；
ios：自ios8起支援
例項展示:
1、vw和vh的簡單示例**
介紹：lorem ipsum dolor sit amet consectetur adipisicing elit. adipisci debitis nobis magni necessitatibus molestias pariatur? beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. tempora?
紅色盒子
藍色盒子
灰色盒子
2、vw、vh、rem的搭配使用例項**（這樣使布局更優化）html**：
doctype htmlcss**>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1"
>
<
title
>rem和vw搭配使用
title
>
head
>
<
body
>
<
div
class
="container"
>
<
img
src=""
alt=""
>
<
p class
="textpart"
>
介紹：lorem ipsum dolor sit amet consectetur adipisicing elit. adipisci debitis nobis magni necessitatibus molestias pariatur? beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. tempora?
p>
div>
<
div
class
="colorbox"
>
<
div
class
="redbox"
>紅色盒子
div>
<
div
class
="bluebox"
>藍色盒子
div>
<
div
class
="graybox"
>灰色盒子
div>
div>
body
>
html
>
html @media screen and (min-width: 375px) }@media screen and (min-width: 414px) }
@media screen and (min-width: 600px) }
@media screen and (min-width: 1000px) }
.container img .container .textpart .colorbox .colorbox .redbox .colorbox .bluebox .colorbox .graybox
5 css中vh和vw的屬性
響應式網頁設計技術很大程度上依賴於比例規則。然而，css比例不總是每個問題的最佳解決方案。css寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。vh等於viewport高度的1 100.例如，如果瀏覽器的高是900px,1vh...
CSS3的vw和vh視口單位
認識視口單位 viewport units 首先，我們要了解什麼是視口。在業界，極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端較為複雜，它涉及到三個視口 分別是 layout vie...
HTML和css中的知識點
1 你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?ie trident核心 firefox gecko核心 safari webkit核心 opera 以前是presto核心，opera現已改用google chrome的blink核心 chrome blink 基於webkit，goo...