蜜桃av色欲a片精品一区,麻豆aⅴ精品无码一区二区,亚洲人成网站在线播放影院在线,亚洲 素人 字幕 在线 最新

  前端 - CSS 學(xué)習(xí)全部24種Viewports

發(fā)布日期：2022/8/26 9:57:14      瀏覽量：

CSS 過去只有四個你需要知道的視口單元，它們幾乎可以涵蓋所有可以想象的用例。 然而，隨著時間的推移和技術(shù)的變化，這四個視口單元不再足以處理所有用例。 由于CSS 增加了 20 個視口單元，這聽起來很多，但它們被分解為六個主要的視口單元，并帶有三個獨(dú)特的修飾符，總共有 24 種組合。

主要的4種視口單元

主要的 CSS 視口單位是 vw、VH、vmin 和 vmax。 您以前可能使用過或看過這些單位，所以我在解釋它們時會盡量簡短。

VW

vw 代表 Viewport Width，代表視口寬度的百分比。 放置在 vw 之前的數(shù)字是視口寬度的百分比。 例如，如果您寫了 10vw，那么這將代表視口寬度的 10% 的長度。

視口代表你屏幕的大小，如果你在一個寬度為 1920 像素的大桌面上，10vw 將代表 192 像素。 如果您使用的是寬度為 300px 的手機(jī)，那么 10vw 將只有 30px。

VH

vh 代表視口高度，與 vw 完全相同，但它代表高度而不是寬度。 這兩個單元可以組合使用，以輕松地使元素填滿屏幕的整個大小。

VMIN 和 VMAX

vmin 和 vmax 表示最大和最小視口尺寸。 例如，如果您使用的是 300 像素寬和 800 像素高的手機(jī)，則 vmin 將代表視口的寬度，而 vmax 將代表設(shè)備的高度。 如果您需要根據(jù)屏幕的最小/最大尺寸調(diào)整元素的大小，這些單位非常有用。 例如，下面的 CSS 將創(chuàng)建一個盡可能大的正方形，而不會在任何方向溢出，因?yàn)樗肋h(yuǎn)不會大于最小屏幕尺寸的 100%。

兩個新的視口單位

CSS 一直在嘗試從嚴(yán)格的頂部/底部、左/右、高度/寬度模型轉(zhuǎn)變?yōu)楦鼊討B(tài)的開始/結(jié)束、塊/內(nèi)聯(lián)模型。 此更改的主要原因是它可以讓你更容易地采用不同的編寫方向。 如果您的整個應(yīng)用程序從水平書寫方向切換到垂直書寫方向，則頂部/底部或?qū)挾?高度的概念不一定意味著相同的事情，因?yàn)槿绻朐谖谋旧戏胶拖路教砑犹畛?，這將被表示 作為垂直書寫系統(tǒng)中的左右填充，而不是填充頂部和底部。 這就是 CSS 添加 vi 和 VB 視口單元的原因。

VI

vi 代表 Viewport inline，代表文檔的內(nèi)聯(lián)方向。 在水平書寫方向上，這對應(yīng)于視口的寬度，而在垂直書寫方向上，這表示視口的高度。 記住 inline 方向的簡單方法是記住它與文本的方向相同。 另一種記住這一點(diǎn)的方法是，如果您有兩個彼此相鄰的內(nèi)聯(lián)元素（例如兩個跨度），那么它們堆疊的方向就是您的內(nèi)聯(lián)方向。

VB

vb 代表 Viewport Block，代表文檔的塊方向。 這與 vi 相反，因此在水平書寫方向上，這將對應(yīng)于視口高度，在垂直文檔中，這將表示視口的寬度。 如果你很難記住這個單元，請記住塊方向始終是塊元素（例如兩個 div）相互堆疊的方向。

視口單位修飾符

到目前為止，我們已經(jīng)介紹了六種主要類型的視口單元，但是當(dāng)您的視口可以改變大小時，您可以將三種不同的修改器添加到單元中以使它們表現(xiàn)不同。例如，當(dāng)您在手機(jī)上瀏覽網(wǎng)頁時，您可能會注意到向下滾動時 URL 欄會消失。發(fā)生這種情況時，您的視口在技術(shù)上會更改大小，因?yàn)楝F(xiàn)在 URL 欄不再占據(jù)您的視口的一部分。當(dāng)前的 CSS 單元無法處理視口大小的這種變化，這就是添加這些修飾符的原因。

這些修飾符是 s、l 和 d。為了使用修飾符，您只需將修飾符放在數(shù)字之后和單位之前，例如 10svw。這為 6 個視口單元中的每一個提供了 4 個總組合。大眾、svw、lvw 和 dvw。

到目前為止，我們在本文中介紹的所有內(nèi)容都沒有使用完全有效的修飾符。當(dāng)您在單元上不使用修飾符時，例如 10vw 或 10vh，瀏覽器將自動默認(rèn)使用基于瀏覽器實(shí)現(xiàn)的 3 個修飾符之一。

s修飾符

s 修飾符代表 Small 并表示可能的最小視口。 在我們的手機(jī)示例中，這將是顯示 URL 欄時視口的大小。 如果您將一個元素設(shè)置為 100svh，它將占據(jù)屏幕高度的 100%，具體取決于顯示 URL 欄時的屏幕大小。 URL 欄是否可見無關(guān)緊要，此單元將始終根據(jù)顯示 URL 欄時的視口大小來確定其大小。

l修飾符

l 修飾符代表Large，代表最大可能的視口。 這幾乎與 s 修飾符相反。 在我們的手機(jī)示例中，這將是沒有顯示 URL 欄時的視口大小。 如果您將元素設(shè)置為 100lvh，則當(dāng) URL 欄不顯示時，它會根據(jù)屏幕大小占據(jù)屏幕高度的 100%。 URL 欄是否可見無關(guān)緊要，如果 URL 欄未顯示，此單元將始終根據(jù)視口的大小確定其大小，這意味著如果您將元素設(shè)置為 100lvh 并且 URL 欄顯示它在技術(shù)上將 比屏幕大。

d修飾符

d 修飾符代表動態(tài)，代表當(dāng)前視口大小。 這就像 s 和 l 修飾符的組合。 在我們的手機(jī)示例中，無論 URL 欄是否顯示，這始終是當(dāng)前視口的大小。 如果我們的 URL 欄正在顯示，則 d 修飾符與 s 修飾符大小相同，而如果 URL 欄未顯示 d 修飾符與 l 修飾符大小相同。

在顯示和隱藏 URL 欄之間的過渡期間，此單元將動態(tài)縮放大小，因此它始終會填滿所有可用空間。 如果您需要確保元素始終根據(jù)視口調(diào)整大小，這很好，但可能會很費(fèi)力，因?yàn)殡S著大小的不斷變化，它會導(dǎo)致大量重繪。

瀏覽器支持

對于每一個很酷的 CSS 功能，您總是需要考慮瀏覽器支持，不幸的是，瀏覽器對這些新視口單元的支持不是很好。 目前，這些新單元的支持率為 15.2%，并且實(shí)際上僅在 Safari 和 Firefox 中得到支持。 缺乏支持的原因是該提案仍處于工作草案階段，這意味著它還處于生命周期的早期階段，距離成為官方 CSS 還很遠(yuǎn)。

結(jié)論

雖然 24 個單位可能聽起來很多，但實(shí)際上只有 6 個單位和三個相對簡單的修飾符。 然而，這些簡單的組合給了我們構(gòu)建完美 CSS 布局的強(qiáng)大能力。