整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
口(viewport)代表當(dāng)前可見的計(jì)算機(jī)圖形區(qū)域。在Web瀏覽器術(shù)語中，通常與瀏覽器窗口相同，但不包括瀏覽器的UI， 菜單欄等——即指你正在瀏覽的文檔的那一部分。
一般我們所說的視口共包括三種：布局視口、視覺視口和理想視口，它們?cè)谄聊贿m配中起著非常重要的作用。
布局視口(layout viewport)：當(dāng)我們以百分比來指定一個(gè)元素的大小時(shí)，它的計(jì)算值是由這個(gè)元素的包含塊計(jì)算而來的。當(dāng)這個(gè)元素是最頂級(jí)的元素時(shí)，它就是基于布局視口來計(jì)算的。
所以，布局視口是網(wǎng)頁布局的基準(zhǔn)窗口，在PC瀏覽器上，布局視口就等于當(dāng)前瀏覽器的窗口大小（不包括borders 、margins、滾動(dòng)條）。
在移動(dòng)端，布局視口被賦予一個(gè)默認(rèn)值，大部分為980px，這保證PC的網(wǎng)頁可以在手機(jī)瀏覽器上呈現(xiàn)，但是非常小，用戶可以手動(dòng)對(duì)網(wǎng)頁進(jìn)行放大。
我們可以通過調(diào)用document.documentElement.clientWidth / clientHeight來獲取布局視口大小。
視覺視口(visual viewport)：用戶通過屏幕真實(shí)看到的區(qū)域。
視覺視口默認(rèn)等于當(dāng)前瀏覽器的窗口大小（包括滾動(dòng)條寬度）。
當(dāng)用戶對(duì)瀏覽器進(jìn)行縮放時(shí)，不會(huì)改變布局視口的大小，所以頁面布局是不變的，但是縮放會(huì)改變視覺視口的大小。
例如：用戶將瀏覽器窗口放大了200%，這時(shí)瀏覽器窗口中的CSS像素會(huì)隨著視覺視口的放大而放大，這時(shí)一個(gè)CSS像素會(huì)跨越更多的物理像素。
所以，布局視口會(huì)限制你的CSS布局而視覺視口決定用戶具體能看到什么。
我們可以通過調(diào)用window.innerWidth / innerHeight來獲取視覺視口大小。
布局視口在移動(dòng)端展示的效果并不是一個(gè)理想的效果，所以理想視口(ideal viewport)就誕生了：網(wǎng)站頁面在移動(dòng)端展示的理想大小。
如上圖，我們?cè)诿枋鲈O(shè)備獨(dú)立像素時(shí)曾使用過這張圖，在瀏覽器調(diào)試移動(dòng)端時(shí)頁面上給定的像素大小就是理想視口大小，它的單位正是設(shè)備獨(dú)立像素。
上面在介紹CSS像素時(shí)曾經(jīng)提到頁面的縮放系數(shù)=CSS像素 / 設(shè)備獨(dú)立像素，實(shí)際上說頁面的縮放系數(shù)=理想視口寬度 / 視覺視口寬度更為準(zhǔn)確。
所以，當(dāng)頁面縮放比例為100%時(shí)，CSS像素=設(shè)備獨(dú)立像素，理想視口=視覺視口。
我們可以通過調(diào)用screen.width / height來獲取理想視口大小。
<meta> 元素表示那些不能由其它HTML元相關(guān)元素之一表示的任何元數(shù)據(jù)信息，它可以告訴瀏覽器如何解析頁面。
我們可以借助<meta>元素的viewport來幫助我們?cè)O(shè)置視口、縮放等，從而讓移動(dòng)端得到更好的展示效果。
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
上面是viewport的一個(gè)配置，我們來看看它們的具體含義：
Value 可能值 描述 width 正整數(shù)或device-width 以pixels（像素）為單位， 定義布局視口的寬度。 height 正整數(shù)或device-height 以pixels（像素）為單位， 定義布局視口的高度。 initial-scale 0.0 - 10.0 定義頁面初始縮放比率。 minimum-scale 0.0 - 10.0 定義縮放的最小值；必須小于或等于maximum-scale的值。 maximum-scale 0.0 - 10.0 定義縮放的最大值；必須大于或等于minimum-scale的值。 user-scalable 一個(gè)布爾值（yes或者no） 如果設(shè)置為 no，用戶將不能放大或縮小網(wǎng)頁。默認(rèn)值為 yes。
為了在移動(dòng)端讓頁面獲得更好的顯示效果，我們必須讓布局視口、視覺視口都盡可能等于理想視口。
device-width就等于理想視口的寬度，所以設(shè)置width=device-width就相當(dāng)于讓布局視口等于理想視口。
由于initial-scale=理想視口寬度 / 視覺視口寬度，所以我們?cè)O(shè)置initial-scale=1;就相當(dāng)于讓視覺視口等于理想視口。
這時(shí)，1個(gè)CSS像素就等于1個(gè)設(shè)備獨(dú)立像素，而且我們也是基于理想視口來進(jìn)行布局的，所以呈現(xiàn)出來的頁面布局在各種設(shè)備上都能大致相似。
上面提到width可以決定布局視口的寬度，實(shí)際上它并不是布局視口的唯一決定性因素，設(shè)置initial-scale也有肯能影響到布局視口，因?yàn)椴季忠暱趯挾热〉氖莣idth和視覺視口寬度的最大值。
例如：若手機(jī)的理想視口寬度為400px，設(shè)置width=device-width，initial-scale=2，此時(shí)視覺視口寬度=理想視口寬度 / initial-scale即200px，布局視口取兩者最大值即device-width 400px。
若設(shè)置width=device-width，initial-scale=0.5，此時(shí)視覺視口寬度=理想視口寬度 / initial-scale即800px，布局視口取兩者最大值即800px。
瀏覽器為我們提供的獲取窗口大小的API有很多，下面我們?cè)賮韺?duì)比一下：
SS 過去只有四個(gè)你需要知道的視口單元，它們幾乎可以涵蓋所有可以想象的用例。 然而，隨著時(shí)間的推移和技術(shù)的變化，這四個(gè)視口單元不再足以處理所有用例。 由于CSS 增加了 20 個(gè)視口單元，這聽起來很多，但它們被分解為六個(gè)主要的視口單元，并帶有三個(gè)獨(dú)特的修飾符，總共有 24 種組合。
主要的4種視口單元
主要的 CSS 視口單位是 vw、vh、vmin 和 vmax。 您以前可能使用過或看過這些單位，所以我在解釋它們時(shí)會(huì)盡量簡(jiǎn)短。
VW
vw 代表 Viewport Width，代表視口寬度的百分比。 放置在 vw 之前的數(shù)字是視口寬度的百分比。 例如，如果您寫了 10vw，那么這將代表視口寬度的 10% 的長(zhǎng)度。
視口代表你屏幕的大小，如果你在一個(gè)寬度為 1920 像素的大桌面上，10vw 將代表 192 像素。 如果您使用的是寬度為 300px 的手機(jī)，那么 10vw 將只有 30px。
VH
vh 代表視口高度，與 vw 完全相同，但它代表高度而不是寬度。 這兩個(gè)單元可以組合使用，以輕松地使元素填滿屏幕的整個(gè)大小。
VMIN 和 VMAX
vmin 和 vmax 表示最大和最小視口尺寸。 例如，如果您使用的是 300 像素寬和 800 像素高的手機(jī)，則 vmin 將代表視口的寬度，而 vmax 將代表設(shè)備的高度。 如果您需要根據(jù)屏幕的最小/最大尺寸調(diào)整元素的大小，這些單位非常有用。 例如，下面的 CSS 將創(chuàng)建一個(gè)盡可能大的正方形，而不會(huì)在任何方向溢出，因?yàn)樗肋h(yuǎn)不會(huì)大于最小屏幕尺寸的 100%。
兩個(gè)新的視口單位
CSS 一直在嘗試從嚴(yán)格的頂部/底部、左/右、高度/寬度模型轉(zhuǎn)變?yōu)楦鼊?dòng)態(tài)的開始/結(jié)束、塊/內(nèi)聯(lián)模型。 此更改的主要原因是它可以讓你更容易地采用不同的編寫方向。 如果您的整個(gè)應(yīng)用程序從水平書寫方向切換到垂直書寫方向，則頂部/底部或?qū)挾?高度的概念不一定意味著相同的事情，因?yàn)槿绻朐谖谋旧戏胶拖路教砑犹畛洌@將被表示 作為垂直書寫系統(tǒng)中的左右填充，而不是填充頂部和底部。 這就是 CSS 添加 vi 和 vb 視口單元的原因。
VI
vi 代表 Viewport Inline，代表文檔的內(nèi)聯(lián)方向。 在水平書寫方向上，這對(duì)應(yīng)于視口的寬度，而在垂直書寫方向上，這表示視口的高度。 記住 inline 方向的簡(jiǎn)單方法是記住它與文本的方向相同。 另一種記住這一點(diǎn)的方法是，如果您有兩個(gè)彼此相鄰的內(nèi)聯(lián)元素（例如兩個(gè)跨度），那么它們堆疊的方向就是您的內(nèi)聯(lián)方向。
VB
vb 代表 Viewport Block，代表文檔的塊方向。 這與 vi 相反，因此在水平書寫方向上，這將對(duì)應(yīng)于視口高度，在垂直文檔中，這將表示視口的寬度。 如果你很難記住這個(gè)單元，請(qǐng)記住塊方向始終是塊元素（例如兩個(gè) div）相互堆疊的方向。
視口單位修飾符
到目前為止，我們已經(jīng)介紹了六種主要類型的視口單元，但是當(dāng)您的視口可以改變大小時(shí)，您可以將三種不同的修改器添加到單元中以使它們表現(xiàn)不同。例如，當(dāng)您在手機(jī)上瀏覽網(wǎng)頁時(shí)，您可能會(huì)注意到向下滾動(dòng)時(shí) URL 欄會(huì)消失。發(fā)生這種情況時(shí)，您的視口在技術(shù)上會(huì)更改大小，因?yàn)楝F(xiàn)在 URL 欄不再占據(jù)您的視口的一部分。當(dāng)前的 CSS 單元無法處理視口大小的這種變化，這就是添加這些修飾符的原因。
這些修飾符是 s、l 和 d。為了使用修飾符，您只需將修飾符放在數(shù)字之后和單位之前，例如 10svw。這為 6 個(gè)視口單元中的每一個(gè)提供了 4 個(gè)總組合。大眾、svw、lvw 和 dvw。
到目前為止，我們?cè)诒疚闹薪榻B的所有內(nèi)容都沒有使用完全有效的修飾符。當(dāng)您在單元上不使用修飾符時(shí)，例如 10vw 或 10vh，瀏覽器將自動(dòng)默認(rèn)使用基于瀏覽器實(shí)現(xiàn)的 3 個(gè)修飾符之一。
s修飾符
s 修飾符代表 Small 并表示可能的最小視口。 在我們的手機(jī)示例中，這將是顯示 URL 欄時(shí)視口的大小。 如果您將一個(gè)元素設(shè)置為 100svh，它將占據(jù)屏幕高度的 100%，具體取決于顯示 URL 欄時(shí)的屏幕大小。 URL 欄是否可見無關(guān)緊要，此單元將始終根據(jù)顯示 URL 欄時(shí)的視口大小來確定其大小。
l修飾符
l 修飾符代表Large，代表最大可能的視口。 這幾乎與 s 修飾符相反。 在我們的手機(jī)示例中，這將是沒有顯示 URL 欄時(shí)的視口大小。 如果您將元素設(shè)置為 100lvh，則當(dāng) URL 欄不顯示時(shí)，它會(huì)根據(jù)屏幕大小占據(jù)屏幕高度的 100%。 URL 欄是否可見無關(guān)緊要，如果 URL 欄未顯示，此單元將始終根據(jù)視口的大小確定其大小，這意味著如果您將元素設(shè)置為 100lvh 并且 URL 欄顯示它在技術(shù)上將 比屏幕大。
d修飾符
d 修飾符代表動(dòng)態(tài)，代表當(dāng)前視口大小。 這就像 s 和 l 修飾符的組合。 在我們的手機(jī)示例中，無論 URL 欄是否顯示，這始終是當(dāng)前視口的大小。 如果我們的 URL 欄正在顯示，則 d 修飾符與 s 修飾符大小相同，而如果 URL 欄未顯示 d 修飾符與 l 修飾符大小相同。
在顯示和隱藏 URL 欄之間的過渡期間，此單元將動(dòng)態(tài)縮放大小，因此它始終會(huì)填滿所有可用空間。 如果您需要確保元素始終根據(jù)視口調(diào)整大小，這很好，但可能會(huì)很費(fèi)力，因?yàn)殡S著大小的不斷變化，它會(huì)導(dǎo)致大量重繪。
瀏覽器支持
對(duì)于每一個(gè)很酷的 CSS 功能，您總是需要考慮瀏覽器支持，不幸的是，瀏覽器對(duì)這些新視口單元的支持不是很好。 目前，這些新單元的支持率為 15.2%，并且實(shí)際上僅在 Safari 和 Firefox 中得到支持。 缺乏支持的原因是該提案仍處于工作草案階段，這意味著它還處于生命周期的早期階段，距離成為官方 CSS 還很遠(yuǎn)。
結(jié)論
雖然 24 個(gè)單位可能聽起來很多，但實(shí)際上只有 6 個(gè)單位和三個(gè)相對(duì)簡(jiǎn)單的修飾符。 然而，這些簡(jiǎn)單的組合給了我們構(gòu)建完美 CSS 布局的強(qiáng)大能力。
*CSS Viewport units(視口單位)**在過去幾年已經(jīng)出現(xiàn)了，隨著時(shí)間的推移，越來越多的開發(fā)人員開始使用它們。它們的好處在于為我們提供了一種不需要使用J avaScript 就能以動(dòng)態(tài)的方式調(diào)整大小的方法。而且，如果它失效，也有很多備用方案。
在本文中，我們將學(xué)習(xí) CSS Viewport units(視口單位)以及如何使用它們，并用列舉一些常見問題及其解決方案和用例，讓我們開始吧。
根據(jù)CSS規(guī)范，視口百分比單位相對(duì)于初始包含塊的大小，它是web頁面的根元素。
視口單位為：vw，vh，vmin和vmax。
vw單位表示根元素寬度的百分比。1vw等于視口寬度的1%。
vw單位表示根元素寬度的百分比，1vw等于視口寬度的1%。
假設(shè)我們有一個(gè)元素與以下CSS：
.element {
width: 50vw;
}當(dāng)視口寬度為500px時(shí)，50vw計(jì)算如下
width = 500*50% = 250pxvh單位表示根元素高度的百分比，一個(gè)vh等于視口高度的1%。
我們有一個(gè)元素與以下CSS:
.element {
height: 50vh;
}當(dāng)視口高度為290px時(shí)，70vh計(jì)算如下:
height = 290*70% = 202px大家都說簡(jiǎn)歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。
vmin表示視口的寬度和高度中的較小值，也就是vw 和 vh 中的較小值。如果視口寬度大于其高度，則將根據(jù)高度計(jì)算該值。
我們以下面的例子為例。
我們有一個(gè)橫屏手機(jī)，其中有一個(gè)元素具有vmin單元。在這種情況下，值將根據(jù)視口高度計(jì)算，因?yàn)樗∮趯挾取?/p>
.element {
padding-top: 10vmin;
padding-bottom: 10vmin;
}這是vmin的計(jì)算方式：
正如你所猜測(cè)的，計(jì)算結(jié)果如下所示
padding-top = (10% of height) = 10% * 164 = 16.4px
padding-bottom = (10% of height) = 10% * 164 = 16.4pxvmax與vmin相反,該值是vw 和 vh 中的較大值。
我們以下面的例子為例。
.element {
padding-top: 10vmax;
padding-bottom: 10vmax;
}計(jì)算結(jié)果如下:
padding-top = (10% of width) = 10% * 350 = 35px
padding-bottom = (10% of width) = 10% * 350 = 35px視口單位基于頁面的根元素，而百分比則基于它們所在的容器。因此，它們彼此不同，但各自都有各自的用處。
CSS 視口單位非常適合響應(yīng)式排版。例如，我們可以將以下內(nèi)容用作文章標(biāo)題：
.title {
font-size: 5vw;
}標(biāo)題的font-size將根據(jù)視口寬度增加或縮小。就像提供的字體大小是視口寬度的5％一樣。但是，如果沒有適當(dāng)?shù)臏y(cè)試就直接使用它可能會(huì)踩到坑。讓我們看下面的視頻：
體大小變得非常小，這不利于可訪問性和用戶體驗(yàn)。據(jù)我所知，移動(dòng)設(shè)備上的最小字體大小不應(yīng)該不于14px。在GIF中，不小于10px。
要解決該問題，我們需要為標(biāo)題提供最小字體大小，可以使用 calc()
.title {
font-size: calc(14px + 2vw);
}calc()CSS函數(shù)將具有一個(gè)最小值14px，并在些基礎(chǔ)上添加2vw的值，有了這些，字體大小值就不會(huì)變得太小。
另一個(gè)需要考慮的重要問題是字體大小在大屏幕上的表現(xiàn)，例如 27” iMac。會(huì)發(fā)生什么呢?你猜對(duì)了，字體大小為95px左右，這是一個(gè)很大的值。為了防止這種情況，我們應(yīng)該在某些斷點(diǎn)上使用媒體查詢并更改字體大小。
@media (min-width: 1800px) {
.title {
font-size: 40px;
}
}通過重置字體大小，我們可以確保大小不會(huì)太大。您可能還需要添加多個(gè)媒體查詢，但這取決于你自己，也取決于項(xiàng)目的上下文。
事例地址：https://codepen.io/shadeed/pen/fa989837c6379770cce49f0be6daa3e3
有時(shí)，我們需要一個(gè)section來獲取100%的視口高度，為此，我們可以使用viewport高度單位。
.section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}通過添加 height: 100vh，我們可以確保section 高度將采取100%的視口。此外，我們添加了一些flexbox來處理水平和垂直居中的內(nèi)容。
事例源碼：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100
在大屏幕上，網(wǎng)站內(nèi)容有時(shí)候很少，footer 沒有粘在底部。這很正常，也不被認(rèn)為是一種不好的做法。但是，還有改進(jìn)的余地。考慮下面代表問題的示圖：
為了解決這個(gè)問題，我們需要給內(nèi)容(content)一個(gè)高度，它等于視口高度- (header + footer)。動(dòng)態(tài)地做到這一點(diǎn)是很困難的，但是使用CSS的視口，這是很容易的。
如果header 和footer的高度是固定的，那么可以將calc()函數(shù)和視口單位結(jié)合起來，如下所示：
header,
footer {
height: 70px;
}
main {
height: calc(100vh - 70px - 70px);
}不能保證此解決方案始終有效，尤其是對(duì)于footer而言。在我的職業(yè)生涯中，我沒有使用固定高度的頁腳，因?yàn)樵诶绮煌钠聊怀叽缦拢薴ooter是不可行的。
通過將100vh設(shè)置為body元素的高度，然后可以使用flexbox來使main元素占用剩余空間。
body {
min-height: 100vh;
display: flex
flex-direction: column;
{
main {
/* This will make the main element take the remaining space dynamically */
flex-grow: 1;
}這樣，問題就解決了，無論內(nèi)容長(zhǎng)度如何，我們都有一個(gè)粘性footer。
事例源碼：https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100
假設(shè)我們有一個(gè)作品集來展示我們的響應(yīng)式設(shè)計(jì)工作，并且我們有三種設(shè)備(移動(dòng)設(shè)備、平板電腦和筆記本電腦)。每個(gè)設(shè)備包含一個(gè)圖像。目標(biāo)使用 CSS 來響應(yīng)適配這些頁面。
通過使用CSS網(wǎng)格和視口單位，我們可以使其完全動(dòng)態(tài)的響應(yīng)式。
<div class="wrapper">
<div class="device laptop"></div>
<div class="device mobile"></div>
<div class="device tablet"></div>
</div>視口單位也可以用于grid- *屬性，也用于border，border-radius和其他屬性。
.wrapper {
display: grid;
grid-template-columns: repeat(20, 5vw);
grid-auto-rows: 6vw;
}
.mobile {
position: relative;
z-index: 1;
grid-column: 2 / span 3;
grid-row: 3 / span 5;
}
.tablet {
position: relative;
z-index: 1;
grid-column: 13 / span 7;
grid-row: 4 / span 4;
border-bottom: 1vw solid #a9B9dd;
border-right: solid 3vw #a9B9dd;
}
.laptop {
position: relative;
grid-column: 3/span 13;
grid-row: 2 / span 8;
}
/* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */
.laptop:after {
content:"";
position:absolute;
bottom: -3vw;
left: -5.5vw;
right: -5.5vw;
height: 3vw;
background-color: #a9B9dd;
border-radius: 0 0 1vw 1vw;
}事例源碼：https://codepen.io/shadeed/pen/2da0f2b70699769f8de3220ff4465bc6?editors=1100
我注意到一個(gè)用例最適合編輯版面。一個(gè)子元素，即使父元素的寬度受到限制，它也會(huì)占據(jù)視口100％的寬度。考慮下面：
.break-out {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}讓我們把它分解一下，這樣我們就能一點(diǎn)一點(diǎn)地理解所有這些屬性是如何工作的。
1.添加 width: 100vw
最重要的一步，將圖像的寬度設(shè)置為100%的視口。
2.添加 margin-left: -50vw
為了使圖像居中，我們需要給它一個(gè)負(fù)的邊距，其寬度為視口寬度的一半。
3.添加 left: 50%
最后，我們需要將圖像向右推，其值為父寬度的50％。
事例地址：https://codepen.io/shadeed/pen/828f12b1ef7fa7211584ff5c7b82d2fa?editors=1100
我想到的另一個(gè)有趣的用例是使用視口單位來表示元素之間的間距。這可以與margin、top、bottom和grid-gap等值一起使用。使用時(shí)，間距將基于視口寬度或高度，這對(duì)于使布局更具動(dòng)態(tài)性可能很有用。
對(duì)于模態(tài)，我們需要將它們從視口頂部推入。通常，使用top屬性進(jìn)行此操作，并使用百分比或像素值。但是，對(duì)于視口單位，我們可以添加一個(gè)可以根據(jù)視口高度改變的間距。
.modal-body {
top: 20vh;
}事例地址：https://codepen.io/shadeed/pen/f77a0d58947c64c2b3dadbd887700db5?editors=1100
頁面header 是充當(dāng)頁面介紹的部分。它通常具有標(biāo)題和描述，并且其中上下邊緣的高度固定或填充
例如，有以下的CSS的樣式：
.page-header {
padding-top: 10vh;
padding-bottom: 10vh;
}
.page-header h2 {
margin-bottom: 1.5vh;
}使用vh單位用于頁面標(biāo)題的 paddding，以及標(biāo)題下方的邊距。注意間距如何變化！
事例源碼：https://codepen.io/shadeed/pen/43024fa031519e316e95bb3ce47f2b22?editors=1100
該用例是關(guān)于頁面標(biāo)題元素的頂部和底部padding 。當(dāng)視口較小（移動(dòng)）時(shí)，通常會(huì)減少padding。通過使用vmin，我們可以在視口較小尺寸（寬度或高度）的基礎(chǔ)上獲得合適的頂部和底部 padding。
.page-header {
padding: 10vmin 1rem;
}事例源碼：https://codepen.io/shadeed/pen/f335c2f43b960a2c70ea057228ddc5b9?editors=0100
我們可以使用vw單位創(chuàng)建響應(yīng)元素，以保持其縱橫比，而不管視口大小如何。
首先，需要先確定所需的縱橫比，對(duì)于此示例，使用9/16。
section {
/* 9/16 * 100 */
height: 56.25vw;
}事例源碼：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=0100
你知道大多數(shù)網(wǎng)站使用的頂部邊框嗎？通常，它的顏色與品牌顏色相同，這會(huì)賦予一些個(gè)性。
我們支持邊框的初始值為3px。如何將固定值轉(zhuǎn)換為視口對(duì)象？下面是如何計(jì)算它的等效的vw。
vw = (Pixel Value / Viewport width) * 100視口寬度用于估計(jì)像素值與所需vw單位之間的比率。
對(duì)于我們的示例，我們?yōu)?header 添加以下樣式：
.header {
border-top: 4px solid #8f7ebc;
}在我的情況下，視口寬度為1440（這不是固定數(shù)字，請(qǐng)用你自己的數(shù)字替換）
vw = (4 / 1440) * 100 = 0.277.header {
border-top: 0.277vw solid #8f7ebc;
}更好的是，我們可以使用一個(gè)基本像素值，而視口單元可以是一個(gè)附加的。
.header {
border-top: calc(2px + 0.138vw) solid $color-main;
}移動(dòng)設(shè)備中存在一個(gè)常見問題，即使使用100vh，也會(huì)滾動(dòng)，原因是地址欄的高度可見。Louis Hoebregts 寫了一篇關(guān)于這個(gè)問題的文章，并給出了一個(gè)簡(jiǎn)單的解決方案。
.my-element {
height: 100vh; /* 不支持自定義屬性的瀏覽器的回退 */
height: calc(var(--vh, 1vh) * 100);
}// 首先，我們得到視口高度，我們乘以 1% 得到一個(gè)vh單位的值
let vh = window.innerHeight * 0.01;
// 然后，將`--vh`自定義屬性中的值設(shè)置為文檔的根目錄一個(gè)屬性
document.documentElement.style.setProperty('--vh', `${vh}px`);事例源碼：https://codepen.io/shadeed/pen/1d18ca2d23ec0038c759dc62dc3fd8c3?editors=0110
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint
原文：https://ishadeed.com/viewport-units/
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
