前端 - CSS 學習全部24種Viewports

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

主要的4種視口單元

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

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

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

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

VMIN 和 VMAX

vmin 和 vmax 表示最大和最小視口尺寸。例如，如果您使用的是 300 像素寬和 800 像素高的手機，則 vmin 將代表視口的寬度，而 vmax 將代表設備的高度。如果您需要根據屏幕的最小/最大尺寸調整元素的大小，這些單位非常有用。例如，下面的 CSS 將創建一個盡可能大的正方形，而不會在任何方向溢出，因為它永遠不會大于最小屏幕尺寸的 100%。

兩個新的視口單位

CSS 一直在嘗試從嚴格的頂部/底部、左/右、高度/寬度模型轉變為更動態的開始/結束、塊/內聯模型。此更改的主要原因是它可以讓你更容易地采用不同的編寫方向。如果您的整個應用程序從水平書寫方向切換到垂直書寫方向，則頂部/底部或寬度/高度的概念不一定意味著相同的事情，因為如果您想在文本上方和下方添加填充，這將被表示作為垂直書寫系統中的左右填充，而不是填充頂部和底部。這就是 CSS 添加 vi 和 vb 視口單元的原因。

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

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

視口單位修飾符

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

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

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

s修飾符

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

l修飾符

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

d修飾符

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

在顯示和隱藏 URL 欄之間的過渡期間，此單元將動態縮放大小，因此它始終會填滿所有可用空間。如果您需要確保元素始終根據視口調整大小，這很好，但可能會很費力，因為隨著大小的不斷變化，它會導致大量重繪。

瀏覽器支持

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

結論

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

來混，那些混過去的，遲早是要還的 (￣Д ￣)┍ 。

讓我們來解決幾個問題：

1. 什么是 viewport ? 它的的作用是啥？

提到 viewport，之前總感覺挺突兀的，但是當我最近做移動端項目時，突然關注到一直被忽略的 meta 標簽的時候，才恍然大悟（o(╯□╰)o）。那么，首先讓我們來了解一下 meta 標簽?一直被忽略的meta標簽了解一下，之后再去看 viewport，就很容易記住了，不就是 meta 標簽中 name 屬性的一個值嘛。

那么，它的作用是啥呢？要了解它具體的作用，我們需要先來了解一些相關的基本知識。

視口類型

viewport 指瀏覽器的窗口，即瀏覽器上用來顯示網頁的那部分區域，是用戶網頁的可視區域。

viewport 的功能在于控制你網站的最高塊狀（block）容器：<html>元素。可以理解為 viewport 是容納 <html> 元素的元素。<html> 元素的寬度為瀏覽器的寬度，即為 viewport 寬度的100%。（原文）

在移動端和pc端，視口是不同的。pc端的視口是瀏覽器窗口區域，而在移動端則有三個不同的視口概念：布局視口、視覺視口、理想視口。

layout viewport（布局視口）：網頁布局的基準窗口，在PC瀏覽器上，相當于當前瀏覽器的窗口大小（不包括borders 、margins、滾動條）。在移動端，布局視口被賦予一個默認值，大部分為980px，這保證PC的網頁可以在手機瀏覽器上呈現，但是非常小，用戶可以手動對網頁進行放大。可以通過 document.documentElement.clientWidth/clientHeight 獲取網頁在標準模式下的布局視口大小。
visual viewport（視覺視口）：用戶在移動設備屏幕上能看到的那部分區域。可以通過 window.innerWidth / innerHeight 來獲取視覺視口大小。
ideal viewport（理想視口）：網站頁面在移動端展示的理想大小。使頁面的寬度跟設備寬度一致（布局視口=理想視口 = 視覺視口），我們就能在移動屏幕上看到正常舒服的頁面。可以通過調用 screen.width / height 來獲取理想視口大小。

（ viewport移動端適配、關于移動端適配，你必須要知道的）

viewport 的設置不會對 PC 頁面產生影響，但對于移動頁面卻很重要。

屬性介紹

屬性含義取值 width 定義視口的寬度，單位為像素正整數或設備寬度device-width height 定義視口的高度，單位為像素正整數或device-height initial-scale 定義初始縮放值整數或小數 minimum-scale 定義縮小最小比例，它必須小于或等于maximum-scale設置整數或小數 maximum-scale 定義放大最大比例，它必須大于或等于minimum-scale設置整數或小數 user-scalable 定義是否允許用戶手動縮放頁面，默認值yes yes/no 基本用法和作用

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
復制代碼

上面這個基本的設置：

width=device-width：表示讓布局視口的寬度等于設備寬度；
initial-scale=1：表示頁面的初始縮放比例為1，相當于讓視覺視口等于理想視口；
maximum-scale=1.0 表示頁面的最大縮放比為1；
user-scalable=no 表示不允許用戶對頁面進行縮放操作。

viewport 屬性的作用，就是讓布局視口通過縮放來適配屏幕寬度，width=device.width 僅僅是讓布局視口初始大小等于設備寬度，后面設置的initial-scale 是用來縮放布局視口大小，而且默認是布局視口初始大小等于設備寬度，也就是所謂的理想視口。

2. 什么是 rem？它的布局原理是什么？

rem（font size of the root element）：是指相對于根元素的字體大小的單位，其布局的本質是等比縮放，一般是基于寬度。

將設計稿轉化為手機屏幕上的內容，就類似于畫地圖，按照一定的比例進行縮小繪制：

3. 為什么要進行 scale 縮放？scale 與 dpr 的關系？

dpr ( device pixel ratio)：設備像素比，即設備物理像素與邏輯像素(css像素)的比例。

window.devicePixelRatio
復制代碼

web前端領域，像素分為設備像素和 CSS像素；
一個 CSS像素的大小是可變的，比如用戶縮放頁面的時候，實際上就是在縮小或放大 CSS像素，而設備像素無論大小還是數量都是不變的。

【設計稿】：設計師給的 750px 寬的設計稿是根據設備像素（device pixel，物理像素）為單位制作的設計稿。

【web頁面編寫】：前端工程師在編碼 web 頁面時所寫的 CSS 像素則需要根據設備像素比來進行換算。

設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width) ，則：
CSS像素 = 設計稿像素/dpr。

縮放會影響布局視口的大小，當我們在移動端對頁面進行放大和縮小時，實際上是在改變 CSS 像素的大小，而 scale 縮放的目的就是為了使 CSS 像素適應移動端的設備像素，而這個縮放是通過兩個關鍵的元素設置來實現的：

width=device-width,initial-scale=1/dpr

做的事情就是先把布局視口放大dpr倍，然后再整體縮放相應倍數以適應設備尺寸，這樣就能夠使css像素和設備物理像素一對一了。

var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
 // iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 
 dpr = 3;
 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
 dpr = 2;
 } else {
 dpr = 1;
 }
} else {
 // 其他設備下，仍舊使用1倍的方案
 dpr = 1;
}
scale = 1 / dpr;
復制代碼

rem 是為了解決不同機型不同寬度的問題，scale是為了解決dpr的問題。移動端自適應與dpr是無關的。

淘寶方案中采用了dpr用于解決1px的問題，而網易方案并沒有引入dpr，布局視口沒有放大，整個頁面也沒有縮放，但是并不影響與設計圖的比例。

? 真的，移動端尺寸自適應與dpr無關

? 詳解適配相關概念

明白了上述幾個問題了之后，我們就掌握了移動端自適應的精髓，從而可以進行實戰開發了。

拿到設計稿，該怎么下手？

通過上面的 rem 換算，我們能夠知道，如何把視覺稿（750px）中元素的 px 轉換成 rem。

（1）設置 html font-size，如將手機屏幕分成10份：

<script>
 var dpr = window.devicePixelRatio;
 var meta = document.createElement('meta');
 // dpr
 meta.setAttribute('content', 'initial-scale=' + 1 / dpr + ', maximum-scale=' + 1 / dpr + ', minimum-scale=' + 1 / dpr + ', user-scalable=no');
 document.getElementsByTagName('head')[0].appendChild(meta);
 // rem
 document.addEventListener('DOMContentLoaded', function (e) {
 document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
 }, false);
</script>
復制代碼

（2）假設元素寬度為 300px，則元素寬度：

可以通過以下的方案來實現自動轉換：

? Scss 方案

$ue-width: 750; /* ue圖的寬度 */
@function px2rem($px) {
 @return #{$px/$ue-width*10}rem;
}
p {
 width: px2rem(100);
}
復制代碼

? vscode 中進行 px 到 rem 的轉換：vscode-cssrem

? postcss-pxtorem 方案

// postcss.config.js
const pxtorem = require('postcss-pxtorem');
const pxtoremOpts = {
 rootValue: 16, // 根字體大小，默認16
 unitPrecision: 5, // 精度
 propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 可以將px轉換成rem的屬性
 selectorBlackList: [], // 選擇器忽略并保留px
 replace: true, // 替換包含rems的規則
 mediaQuery: false, // 是否允許在媒體查詢中轉換px
 minPixelValue: 2 // 設置要替換的最小像素值
};
module.exports = {
 plugins: [
 pxtorem(pxtoremOpts),
 ],
};
復制代碼

5. 常見移動端分辨率

常，我們希望限制元素相對于其父元素的寬度，同時使其具有動態性。因此，有一個基礎寬度或高度的能力，使其擴展的基礎上，可用的空間。比如說，我們有一個按鈕，它的寬度應該是最小的，不應該低于它的寬度。這就是最大和最小屬性變得方便的地方。

在本文中，我們將詳細介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細解釋每一個屬性。

width 屬性

首先要討論的是與寬度相關的屬性。我們有min-width和max-width，它們中的每一個都很重要，都有自己的用例。

Min Width

設置min-width的值時，其好處在于防止width屬性使用的值變得小于min-width的指定值。請注意，min-width的默認值是auto，它解析為0。

讓我們舉一個基本的例子來說明這一點。

我們有一個按鈕，里面有一個變化的文本。文本的范圍可能從一個單詞到多個單詞。為了確保即使只有一個單詞，它也有最小寬度，應該使用min-width。

最小寬度為100px，這樣即使按鈕的內容很短，比如Done，或者只有一個圖標，它仍然足夠大，可以被注意到。在使用阿拉伯語等多語言網站時，這一點非常重要。考慮以下來自Twitter的示例：

在以前的情況下，按鈕上帶有單詞“??”，表示完成。按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。

min-width 和 padding

在內容較長的情況下，min-width可以擴展按鈕的寬度，而水平方向上的padding應該被添加，以實現一個合適的外觀按鈕。

Max Width

在設置max-width值時，它的好處在于防止width屬性使用的值超過max-width的指定值。max-width的默認值是none。

max-width的常見且簡單的用例是將其與圖像一起使用。考慮以下示例：

圖像比它的父元素大。通過使用max-width: 100%，圖像的寬度不會超過其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會對圖像產生實際影響，因為它比父圖像小。

使用最小寬度和最大寬度

當min-width和max-width都用于一個元素時，它們中的哪一個將覆蓋另一個?換句話說，哪個優先級更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值為100px，并在其上加上min-width和max-width值。結果是元素寬度未超過其包含的塊/父元素的50％。

height 屬性

除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。

min-height

設置min-height的值時，其好處在于防止使用的height屬性值變得小于min-height的指定值。請注意，最小高度的默認值為auto，它解析為0。

我們用一個簡單的例子來演示一下。

我們有一個帶有描述文本的部分。目標是為section設置一個最小高度，這樣它就可以處理短或長內容。考慮下面的基本情況

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度為100px，使用flexbox時，內容水平和垂直居中。如果內容更長，會發生什么？例如一段？

是的，你猜對了!section的高度將展開以包含新內容。有了它，我們就可以構建靈活的組件，并對其內容做出響應。

事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

max-height

在設置max-height值時，它的好處在于防止height屬性使用的值超過max-height的指定值。注意，max-height的默認值是none。

考慮下面的示例，其中我為內容設置了max-height。但是，因為它大于指定的空間，所以會發生溢出。因此，文本超出了其父邊界。

最小和最大屬性的用例

我們將介紹min-width，min-height，max-width和max-height的一些常見和不常見的用例。

標簽列表

當有一個標簽列表時，建議限制一個標簽的最小寬度，這樣如果它的內容很短，它的外觀就不會受到影響。

通過具有這種靈活性，無論內容有多短，標簽都將看起來不錯。但是，如果內容作者輸入了一個非常長的標簽名稱，而他使用的內容管理系統沒有標簽的最大字符長度，將會發生什么情況呢？我們也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通過使用max-width，標簽寬度將被限制為特定值。但是，這還不夠，標簽名稱應被截斷。

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按鈕

對于按鈕的最小值和最大值有不同的用例，因為按鈕組件有多種變體。考慮下面的圖：

請注意，按鈕的“Get”寬度太小。如果不設置最小寬度，則由于任何原因而沒有文本時，情況可能會變得更糟。在這種情況下，設置最小寬度很重要。

使用 flexbox 將最小寬度設置為零

min-width的默認值是auto，它被計算為0。當一個元素是一個flex項時，min-width的值不會計算為零。flex 項目的最小大小等于其內容的大小。

根據CSSWG：

默認情況下，flex項目不會縮小到它們的最小內容大小(最長單詞或固定大小元素的長度)以下。要更改此設置，請設置min-width或 min-height屬性。

考慮下面的例子

這個人的名字有一個很長的單詞，這導致了溢出和水平滾動。盡管如此，我還是在標題中添加了下面的CSS來截斷它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于title是flex項目，因此解決方案是重置min-width并將其強制為零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修復后的樣子

根據CSSWG：

在彈性項目的主軸上可見溢出的項目上，當在彈性項目的主軸min-size屬性中指定時，指定自動最小尺寸。

意味著，將overflow設置為visible值以外的值會導致min-width被計算為0，這解決了我們不設置min-width: 0的問題。

事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

使用 flexbox 將最小高度設置為零

雖然與min-width相比，這是一個不太常見的問題，但是它可能發生。只是為了確認，問題與不能少于其內容的彈性項目有關。結果min-height值被設置為與內容一樣長。

考慮以下示例：

用紅色表示的文本應該在父文本中裁剪。因為面板主體是一個flex項目，所以它的min-height與它的內容相等。為了防止這種情況，我們應該重新設置最小高度值。看看HTML和CSS是怎么樣的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通過向面板主體添加min-height: 0，這將重置該屬性，并且現在應該可以正常工作。

事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

混合最小寬度和最大寬度

在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導致組件太寬，而我們并不想這樣做。考慮以下示例

由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動視口。為了解決這個問題，我們可以使用百分比來代替像素作為最小和最大屬性。考慮下面這個具有article主體的示例。

我為圖像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　頁面包裝器/容器

最常用的｀max-width｀用例之一是頁面包裝器或容器。通過向頁面添加最大寬度，我們可以確保內容對用戶來說是可讀的、易于瀏覽的。

下面是一個包裝器的例子，它是居中的，左右兩邊有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大寬度和ch單位

ch 是一個相對于數字0的大小，1ch 就是數字 0 的寬度。如定義一個3ch的寬度，那么就只能裝下 3個0。

<!-- HTML代碼 -->

<div>0000</div>

/* CSS代碼 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，我們可以利用ch單元，因為它是一個article 主體。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

對高度未知的元素進行動畫處理

在某些情況下，我們面臨著使手風琴或移動菜單具有意想不到的內容高度的挑戰。在這種情況下，max-height可能是一個很好的解決方案。

請考慮以下示例：

單擊菜單按鈕后，菜單應隨動畫從上到下滑動。如果沒有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。但是，對于max-height，這是可能的。想法是為高度添加一個較大的值，例如max-height：20rem，可能無法達到，然后我們可以使用動畫從max-height: 0變換到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

點擊菜單按鈕可以看到動畫的運行。

事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一般來說，我不喜歡給元素添加固定的高度。我覺得這樣做，會破壞流式布局的結構。但有些情況設置固定高度卻很有用。

考慮下面的例子，在這里我們有一個設置了固定高度的hero部分。

是，當內容較長時，它會溢出并離開hero包裝器，這可不太好。

為了預先解決這個問題，我們可以使用min-height來代替height。我們可以用這種方式先解決問題，盡管這可能會導致頁面看起來很奇怪，但是我認為應該首先防止內容管理系統(CMS)中發生這樣的事情。這樣，問題就解決了，看起來也不錯。

內容溢出的問題不僅在于內容是否大于固定的hero 高度。它可以發生在屏幕大小調整作為文本換行的結果。

如果改用min-height，則上述情況根本不會發生。

模態組件

對于模態組件，它需要最小和最大寬度，以便可以適應移動設備到PC的屏幕上的適應。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

對于我來說，我更喜歡第二個思路，因為我只需要定義max-width: 600px。modal是一個<div>元素，因此它已經具有其父元素的100％寬度，對嗎？

考慮下面為模態設計簡化的測試案例。請注意，如果可用視口空間不足，則寬度如何更改為其父級的100％。

事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

最小高度和粘性頁腳

當一個網站的內容不夠長，它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。

請注意，頁腳未粘貼在瀏覽器窗口的末尾。那是因為內容不足以達到瀏覽器窗口高度的長度。修復后，其外觀應如下所示：

首先，將body元素作為flexbox容器，然后將其最小高度設置為視口高度的100％。

事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

最大寬度/高度和視口單位的流體比率

為了使比例容器能夠根據視口大小進行響應縮放，引入了padding hack。現在，我們可以通過組合CSS中的視口單位和最大寬度/高度來模仿相同的行為。

我們有一個尺寸為644 * 1000像素的圖像。為了使其流暢，我們需要以下內容：

縱橫比：高度/寬度
容器的寬度：可以是固定數字，也可以是動態數字（100％）
設置height為視口寬度的100％乘以縱橫比
設置max-heigh，該高度是容器的寬度乘以縱橫比
max-width設置為等于容器寬度

人才們的【三連】就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：Ahmad shaded 譯者：前端小智來源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

在線咨詢

上一篇：建伍TH28/48對講機還有人在玩嗎
下一篇：JavaScript 檢測瀏覽器和操作系統

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商