如何使用HTML和CSS的新特性實(shí)現(xiàn)響應(yīng)式布局

這篇文章主要介紹如何使用HTML和CSS的新特性實(shí)現(xiàn)響應(yīng)式布局，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

除了使用媒體查詢和現(xiàn)代CSS布局（如flexbox和grid）來創(chuàng)建響應(yīng)式網(wǎng)站外，我們還可以做好某些被忽視的事情來制作響應(yīng)式網(wǎng)站。在本文中，我們將探討許多可用的工具（圍繞HTML和CSS），從響應(yīng)圖像到相對(duì)較新的CSS函數(shù)，無論我們是否使用媒體查詢，它們都可以正常工作。

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

真正的響應(yīng)式圖像

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

• 圖像可能會(huì)變形到失去焦點(diǎn)的程度。
• 較小的設(shè)備仍會(huì)下載完整尺寸的圖像。

在網(wǎng)絡(luò)上使用圖像時(shí)，我們必須確保在分辨率和尺寸方面進(jìn)行了優(yōu)化。原因是為了確保我們有合適的圖像分辨率以適應(yīng)合適的設(shè)備，所以我們不會(huì)最終為較小的屏幕下載非常大和沉重的圖像，這可能會(huì)降低網(wǎng)站的性能。

簡單來說，我們要確保較大的、高分辨率的圖像被發(fā)送到大屏幕上，而較小的、低分辨率的變化被發(fā)送到小屏幕上，從而提高性能和用戶體驗(yàn)。

HTML提供了 <picture> 元素，該元素使我們可以根據(jù)所添加的媒體查詢來指定要呈現(xiàn)的確切圖像資源。如前所述，我們沒有將一個(gè)圖像(通常是一個(gè)大的、高分辨率的版本)發(fā)送到所有屏幕大小并將其縮放到視口寬度，而是指定一組用于特定情況的圖像。

<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 是全尺寸圖像。從那里，我們定義了圖片的下一個(gè)最大版本，picture-lg.png，大小依次減少，直到最小的版本 picture-sm.png。請(qǐng)注意，我們?cè)谶@種方法中仍然使用媒體查詢，但驅(qū)動(dòng)響應(yīng)行為的是 <picture> 元素本身，而不是在CSS中定義斷點(diǎn)。

媒體查詢已適當(dāng)添加，以隨圖片大小縮放：

• 大于等于1000px的視口將獲得 picture.png。
• 介于601像素和999像素之間的視口將獲得 picture-lg.png。
• 介于401像素和600像素之間的視口將獲得 picture-sm.png。
• 任何小于400px的東西都會(huì)得到 picture-sm.png。

有趣的是，我們還可以在URL后按圖像密度給每張圖片貼上標(biāo)簽——1x、2x、3x等等。如果我們把不同的圖片按比例制作好了就可以了，這樣瀏覽器就可以根據(jù)屏幕的像素密度以及視口大小來決定下載哪個(gè)版本。但是請(qǐng)注意，我們最終定義了多少個(gè)圖像：

<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> 元素內(nèi)的兩個(gè)標(biāo)簽：<source> 和 <img>。

瀏覽器將查找媒體查詢與當(dāng)前視口寬度匹配的第一個(gè) <source> 元素，然后將顯示正確的圖像（在 srcset 屬性中指定）。<img> 元素是 <picture> 元素的最后一個(gè)子元素，如果沒有原始源標(biāo)簽匹配，則作為后備選項(xiàng)。

我們還可以使用圖像密度通過 srcset 屬性僅使用 <img> 元素來處理響應(yīng)圖像：

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

我們可以做的另一件事是在CSS中根據(jù)設(shè)備本身的屏幕分辨率（通常以dots per inch或dpi為單位）而不僅僅是設(shè)備視口來編寫媒體查詢。這意味著，代替：

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

我們現(xiàn)在有：

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

這種方法讓我們可以根據(jù)設(shè)備本身的屏幕分辨率來決定渲染什么圖像，這在處理高分辨率圖像時(shí)可能會(huì)有幫助?；旧?，這意味著我們可以為支持更高分辨率的屏幕顯示高質(zhì)量的圖片，并以較低的分辨率顯示較小的版本。值得注意的是，雖然移動(dòng)設(shè)備的屏幕很小，但它們的分辨率通常很高。這意味著在決定渲染哪張圖片時(shí)，僅僅依靠分辨率可能不是最好的主意。這可能導(dǎo)致在非常小的屏幕上顯示大的、高分辨率的圖像，這可能不是我們真正想要在如此小的屏幕上顯示的版本。

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> 給我們提供的基本上是對(duì)圖像進(jìn)行藝術(shù)指導(dǎo)的能力。而且，根據(jù)這個(gè)想法，我們可以利用CSS的特性，比如 object-fit 屬性，當(dāng)與 object-position  一起使用時(shí)，我們可以裁剪圖像以獲得更好的焦點(diǎn)，同時(shí)保持圖像的縱橫比。

因此，要更改圖像的焦點(diǎn)：

@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中設(shè)置minimum和maximum

min() 函數(shù)指定一個(gè)元素可以縮小到的絕對(duì)最小尺寸。這個(gè)函數(shù)在幫助文本大小在不同屏幕大小之間適當(dāng)縮放方面非常有用，比如永遠(yuǎn)不要讓流體類型下降到一個(gè)清晰的字體大小以下：

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

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

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

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

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

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

如果60%計(jì)算出的數(shù)值大于600px，瀏覽器就會(huì)使用60%作為寬度。反過來說，如果60%的計(jì)算值小于600px，那么將使用600px作為元素的寬度。

鉗制（Clamping）值

我們中的許多人已經(jīng)為clip()叫囂了一段時(shí)間，實(shí)際上我們?cè)谒鞋F(xiàn)代瀏覽器中都得到了廣泛的支持（對(duì)不起，IE）。 clamp() 是 min() 和 max() 函數(shù)的組合，接受三個(gè)參數(shù)：

• 最小值

• 首選值，以及

• 最大值

例如：

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

瀏覽器會(huì)將字體設(shè)置為1rem，直到1rem的計(jì)算值大于40px。而當(dāng)計(jì)算值大于40px時(shí)？是的，瀏覽器在達(dá)到4rem后將停止增加大小。你可以看到如何使用 clip() 來使元素變得流暢，而無需使用媒體查詢。

與響應(yīng)單位合作

你是否曾經(jīng)建立過一個(gè)大標(biāo)題或小標(biāo)題的頁面，并羨慕它在桌面屏幕上看起來有多好，但在移動(dòng)設(shè)備上檢查時(shí)卻發(fā)現(xiàn)它太大了？我肯定會(huì)遇到這種情況，在本節(jié)中，我將解釋如何處理此類問題。

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

絕對(duì)單位

像素（px）被視為絕對(duì)單位，主要是因?yàn)橄袼厥枪潭ǖ?，并且不?huì)因其他任何元素的測量而變化。可以將其視為其他一些相對(duì)單位使用的基本單位或根單位。試圖使用像素來進(jìn)行響應(yīng)行為可能會(huì)碰到問題，因?yàn)樗枪潭ǖ?，但如果你有一些根本不?yīng)該調(diào)整大小的元素，它們是很好的。

相對(duì)單位

相對(duì)單位，如 %、em 和 rem，更適合響應(yīng)式設(shè)計(jì)，主要是因?yàn)樗鼈兡軌蚩缭讲煌钠聊怀叽邕M(jìn)行縮放。

• vw：相對(duì)于視口的寬度
• vh：相對(duì)于視口的高度
• rem：相對(duì)于根（<html>）元素（默認(rèn)字體大小通常為16px）
• em：相對(duì)于父元素
• ％：相對(duì)于父元素

同樣，大多數(shù)瀏覽器的默認(rèn)字體大小是 16px ，rem 單位使用它來生成計(jì)算值。所以，如果用戶在瀏覽器上調(diào)整字體大小，頁面上的所有內(nèi)容都會(huì)根據(jù)根部大小正確縮放。例如，當(dāng)處理一個(gè)根為 16px 時(shí)，你指定的數(shù)字將乘以該數(shù)字乘以默認(rèn)大小。例如：

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

如果你或用戶更改默認(rèn)大小怎么辦？我們已經(jīng)說過，這些都是相對(duì)單位，最終的尺寸值將以新的基本尺寸為基礎(chǔ)。這在媒體查詢中很有用，你只需改變字體大小，整個(gè)頁面就會(huì)相應(yīng)地放大或縮小。

例如，如果你在CSS中把字體大小改為10px，那么計(jì)算出來的大小就會(huì)變成。

html {
  font-size : 10px;
}

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

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

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

rem 和 em 單位有什么區(qū)別？ rem 使用根元素(<html>)的字體大小來計(jì)算值，而聲明 em 值的元素則引用包含它的父元素的字體大小。如果指定的父元素和根元素的大小不同（例如父元素是18px，但根元素是16px），那么em和rem將解析為不同的計(jì)算值。這讓我們可以更精細(xì)地控制我們的元素在不同的響應(yīng)環(huán)境中的響應(yīng)方式。

vh 是視口高度的首字母縮寫，也就是可視屏幕的高度，100vh代表視口高度的100%（取決于設(shè)備）。同理，vw 代表視口寬度，意為設(shè)備的可視屏幕寬度，100vw字面意思是代表100%的視口寬度。

超越媒體查詢

看到了嗎？我們剛剛看了一些非常強(qiáng)大且相對(duì)較新的 HTML 和 CSS 功能，它們?yōu)槲覀兲峁┝祟~外的（可能更有效的）構(gòu)建響應(yīng)性的方法。這并不是說這些新技術(shù)取代了我們一直在做的事情。它們只是我們開發(fā)者工具帶中的更多工具，讓我們有更大的控制權(quán)來決定元素在不同上下文中的行為。無論是對(duì)字體大小、分辨率、寬度、焦點(diǎn)，還是任何事物的處理，我們對(duì)用戶體驗(yàn)的控制都比以往更加精細(xì)。

所以，下次當(dāng)你發(fā)現(xiàn)自己在一個(gè)項(xiàng)目上工作時(shí)，你希望在特定設(shè)備上對(duì)設(shè)計(jì)的確切外觀和感覺有更多的控制，看看原生HTML和CSS能幫上什么忙——事情已經(jīng)發(fā)展到令人難以置信的地步了。

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