如何使用HTML和CSS的新特性實現響應式布局

這篇文章主要介紹如何使用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能幫上什么忙——事情已經發展到令人難以置信的地步了。

以上是“如何使用HTML和CSS的新特性實現響應式布局”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！