使用HTML和CSS的新特性實現響應式佈局

除了使用媒體查詢和現代CSS佈局（如flexbox和grid）來建立響應式網站外，我們還可以做好某些被忽視的事情來製作響應式網站。在本文中，我們將探討許多可用的工具（圍繞HTML和CSS），從響應影象到相對較新的CSS函數，無論我們是否使用媒體查詢，它們都可以正常工作。

事實上，媒體查詢與這些功能一起使用時，更多的是成為一種補充，而不是完整的方法。讓我們來看看是如何運作的。

真正的響應式影象

還記得當我們可以在圖片上寫死 width: 100% ，然後就可以下班了嗎？當然，這樣做還是有效果的，也確實能讓圖片變得更有彈性，但也會帶來一些弊端，其中最明顯的包括：

影象可能會變形到失去焦點的程度。
較小的裝置仍會下載完整尺寸的影象。

在網路上使用影象時，我們必須確保在解析度和尺寸方面進行了優化。原因是為了確保我們有合適的影象解析度以適應合適的裝置，所以我們不會最終為較小的螢幕下載非常大和沉重的影象，這可能會降低網站的效能。

簡單來說，我們要確保較大的、高解析度的影象被傳送到大螢幕上，而較小的、低解析度的變化被傳送到小螢幕上，從而提高效能和使用者體驗。

HTML提供了 <picture> 元素，該元素使我們可以根據所新增的媒體查詢來指定要呈現的確切影象資源。如前所述，我們沒有將一個影象(通常是一個大的、高解析度的版本)傳送到所有螢幕大小並將其縮放到視口寬度，而是指定一組用於特定情況的影象。

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
  <img src="picture.png" alt="picture"">
</picture>

在此範例中，picture.png 是全尺寸影象。從那裡，我們定義了圖片的下一個最大版本，picture-lg.png，大小依次減少，直到最小的版本 picture-sm.png。請注意，我們在這種方法中仍然使用媒體查詢，但驅動響應行為的是 <picture> 元素本身，而不是在CSS中定義斷點。

媒體查詢已適當新增，以隨圖片大小縮放：

大於等於1000px的視口將獲得 picture.png。
介於601畫素和999畫素之間的視口將獲得 picture-lg.png。
介於401畫素和600畫素之間的視口將獲得 picture-sm.png。
任何小於400px的東西都會得到 picture-sm.png。

有趣的是，我們還可以在URL後按影象密度給每張圖片貼上標籤——1x、2x、3x等等。如果我們把不同的圖片按比例製作好了就可以了，這樣瀏覽器就可以根據螢幕的畫素密度以及視口大小來決定下載哪個版本。但是請注意，我們最終定義了多少個影象：

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x">
  <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x">
  <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x">
  <img src="picture.png" alt="picture"">
</picture>

讓我們專門看一下巢狀在 <picture> 元素內的兩個標籤：<source> 和 <img>。

瀏覽器將查詢媒體查詢與當前視口寬度匹配的第一個 <source> 元素，然後將顯示正確的影象（在 srcset 屬性中指定）。<img> 元素是 <picture> 元素的最後一個子元素，如果沒有原始源標籤匹配，則作為後備選項。

我們還可以使用影象密度通過 srcset 屬性僅使用 <img> 元素來處理響應影象：

<img
 srcset="
  flower4x.png 4x,
  flower3x.png 3x,
  flower2x.png 2x,
  flower1x.png 1x
 "
 src="flower-fallback.jpg"
>

我們可以做的另一件事是在CSS中根據裝置本身的螢幕解析度（通常以dots per inch或dpi為單位）而不僅僅是裝置視口來編寫媒體查詢。這意味著，代替：

@media only screen and (max-width: 600px) {
  /* Style stuff */
}

我們現在有：

@media only screen and (min-resolution: 192dpi) {
  /* Style stuff */
}

這種方法讓我們可以根據裝置本身的螢幕解析度來決定渲染什麼影象，這在處理高解析度影象時可能會有幫助。基本上，這意味著我們可以為支援更高解析度的螢幕顯示高品質的圖片，並以較低的解析度顯示較小的版本。值得注意的是，雖然移動裝置的螢幕很小，但它們的解析度通常很高。這意味著在決定渲染哪張圖片時，僅僅依靠解析度可能不是最好的主意。這可能導致在非常小的螢幕上顯示大的、高解析度的影象，這可能不是我們真正想要在如此小的螢幕上顯示的版本。

body {
  background-image : picture-md.png; /* the default image */
}

@media only screen and (min-resolution: 192dpi) {
  body {
    background-image : picture-lg.png; /* higher resolution */
  }
}

<picture> 給我們提供的基本上是對影象進行藝術指導的能力。而且，根據這個想法，我們可以利用CSS的特性，比如 object-fit 屬性，當與 object-position 一起使用時，我們可以裁剪影象以獲得更好的焦點，同時保持影象的縱橫比。

因此，要更改影象的焦點：

@media only screen and (min-resolution: 192dpi) {
  body {
    background-image : picture-lg.png;
    object-fit: cover;
    object-position: 100% 150%; /* moves focus toward the middle-right */
  }
}

在CSS中設定minimum和maximum

min() 函數指定一個元素可以縮小到的絕對最小尺寸。這個函數在幫助文字大小在不同螢幕大小之間適當縮放方面非常有用，比如永遠不要讓流體型別下降到一個清晰的字型大小以下：

html {
  font-size: min(1rem, 22px); /* Stays between 16px and 22px */
}

min() 接受兩個值，它們可以是相對、百分比或固定單位。在這個例子中，我們告訴瀏覽器永遠不要讓帶有 .box 類的元素寬度低於45%或600px，以視口寬度最小的為準。

.box {
  width : min(45%, 600px)
}

如果45％計算得出的值小於600px，則瀏覽器將使用45％作為寬度。反之，如果45%的計算值大於600px，那麼元素的寬度將使用600px。

max() 函數也是同樣的道理，它也接受兩個值，但不是指定一個元素的最小尺寸，而是定義它的最大尺寸。

.box {
  width : max(60%, 600px)
}

如果60%計算出的數值大於600px，瀏覽器就會使用60%作為寬度。反過來說，如果60%的計算值小於600px，那麼將使用600px作為元素的寬度。

鉗制（Clamping）值

我們中的許多人已經為clip()叫囂了一段時間，實際上我們在所有現代瀏覽器中都得到了廣泛的支援（對不起，IE）。 clamp() 是 min() 和 max() 函數的組合，接受三個引數：

最小值
首選值，以及
最大值

例如：

.box {
  font-size : clamp(1rem, 40px, 4rem)
}

瀏覽器會將字型設定為1rem，直到1rem的計算值大於40px。而當計算值大於40px時？是的，瀏覽器在達到4rem後將停止增加大小。你可以看到如何使用 clip() 來使元素變得流暢，而無需使用媒體查詢。

與響應單位合作

你是否曾經建立過一個大標題或小標題的頁面，並羨慕它在桌面螢幕上看起來有多好，但在移動裝置上檢查時卻發現它太大了？我肯定會遇到這種情況，在本節中，我將解釋如何處理此類問題。

在CSS中，你可以使用各種度量單位來確定元素的大小或長度，最常用的度量單位包括：px，em，rem，％，vw 和 vh。雖然，還有一些不常用的單位。我們感興趣的是，px 可以認為是一個絕對單位，而其餘的則認為是相對單位。

絕對單位

畫素（px）被視為絕對單位，主要是因為畫素是固定的，並且不會因其他任何元素的測量而變化。可以將其視為其他一些相對單位使用的基本單位或根單位。試圖使用畫素來進行響應行為可能會碰到問題，因為它是固定的，但如果你有一些根本不應該調整大小的元素，它們是很好的。

相對單位

相對單位，如 %、em 和 rem，更適合響應式設計，主要是因為它們能夠跨越不同的螢幕尺寸進行縮放。

vw：相對於視口的寬度
vh：相對於視口的高度
rem：相對於根（<html>）元素（預設字型大小通常為16px）
em：相對於父元素
％：相對於父元素

同樣，大多數瀏覽器的預設字型大小是 16px ，rem 單位使用它來生成計算值。所以，如果使用者在瀏覽器上調整字型大小，頁面上的所有內容都會根據根部大小正確縮放。例如，當處理一個根為 16px 時，你指定的數位將乘以該數位乘以預設大小。例如：

.8rem = 12.8px (.8 * 16)
1rem = 16px (1 * 16)
2rem = 32px (2 * 16)

如果你或使用者更改預設大小怎麼辦？我們已經說過，這些都是相對單位，最終的尺寸值將以新的基本尺寸為基礎。這在媒體查詢中很有用，你只需改變字型大小，整個頁面就會相應地放大或縮小。

例如，如果你在CSS中把字型大小改為10px，那麼計算出來的大小就會變成。

html {
  font-size : 10px;
}

1rem = 10px (1 * 10)
2rem = 20px (2 * 10)
.5rem = 5px (.5 * 10)

注意：這也適用於百分比 ％。例如：

100% = 16px;
200% = 32px; 
50% = 8px;

rem 和 em 單位有什麼區別？ rem 使用根元素(<html>)的字型大小來計算值，而宣告 em 值的元素則參照包含它的父元素的字型大小。如果指定的父元素和根元素的大小不同（例如父元素是18px，但根元素是16px），那麼em和rem將解析為不同的計算值。這讓我們可以更精細地控制我們的元素在不同的響應環境中的響應方式。

vh 是視口高度的首字母縮寫，也就是可視螢幕的高度，100vh代表視口高度的100%（取決於裝置）。同理，vw 代表視口寬度，意為裝置的可視螢幕寬度，100vw字面意思是代表100%的視口寬度。

超越媒體查詢

看到了嗎？我們剛剛看了一些非常強大且相對較新的 HTML 和 CSS 功能，它們為我們提供了額外的（可能更有效的）構建響應性的方法。這並不是說這些新技術取代了我們一直在做的事情。它們只是我們開發者工具帶中的更多工具，讓我們有更大的控制權來決定元素在不同上下文中的行為。無論是對字型大小、解析度、寬度、焦點，還是任何事物的處理，我們對使用者體驗的控制都比以往更加精細。

所以，下次當你發現自己在一個專案上工作時，你希望在特定裝置上對設計的確切外觀和感覺有更多的控制，看看原生HTML和CSS能幫上什麼忙——事情已經發展到令人難以置信的地步了。

原文地址：https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/

更多程式設計相關知識，請存取：！！

以上就是使用HTML和CSS的新特性實現響應式佈局的詳細內容，更多請關注TW511.COM其它相關文章！