超越媒體查詢：使用更新的HTML和CSS功能進行響應(yīng)式設(shè)計
除了使用媒體查詢和現(xiàn)代CSS布局(如flexbox和grid)來創(chuàng)建響應(yīng)式網(wǎng)站外，我們還可以做好某些被忽視的事情來制作響應(yīng)式網(wǎng)站。在本文中，我們將探討許多可用的工具(圍繞HTML和CSS)，從響應(yīng)圖像到相對較新的CSS函數(shù)，無論我們是否使用媒體查詢，它們都可以正常工作。
事實上，媒體查詢與這些功能一起使用時，更多的是成為一種補充，而不是完整的方法。讓我們來看看是如何運作的。
真正的響應(yīng)式圖像
還記得當(dāng)我們可以在圖片上寫死 width: 100% ，然后就可以下班了嗎?當(dāng)然，這樣做還是有效果的，也確實能讓圖片變得更有彈性，但也會帶來一些弊端，其中最明顯的包括：
- 圖像可能會變形到失去焦點的程度。
- 較小的設(shè)備仍會下載完整尺寸的圖像。
在網(wǎng)絡(luò)上使用圖像時，我們必須確保在分辨率和尺寸方面進行了優(yōu)化。原因是為了確保我們有合適的圖像分辨率以適應(yīng)合適的設(shè)備，所以我們不會最終為較小的屏幕下載非常大和沉重的圖像，這可能會降低網(wǎng)站的性能。
簡單來說，我們要確保較大的、高分辨率的圖像被發(fā)送到大屏幕上，而較小的、低分辨率的變化被發(fā)送到小屏幕上，從而提高性能和用戶體驗。
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。請注意，我們在這種方法中仍然使用媒體查詢，但驅(qū)動響應(yīng)行為的是<picture>元素本身，而不是在CSS中定義斷點。
媒體查詢已適當(dāng)添加，以隨圖片大小縮放：
- 大于等于1000px的視口將獲得 picture.png。
- 介于601像素和999像素之間的視口將獲得 picture-lg.png。
- 介于401像素和600像素之間的視口將獲得 picture-sm.png。
- 任何小于400px的東西都會得到 picture-sm.png。
有趣的是，我們還可以在URL后按圖像密度給每張圖片貼上標簽——1x、2x、3x等等。如果我們把不同的圖片按比例制作好了就可以了，這樣瀏覽器就可以根據(jù)屏幕的像素密度以及視口大小來決定下載哪個版本。但是請注意，我們最終定義了多少個圖像：
- <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)的兩個標簽：<source>和<img> 。
瀏覽器將查找媒體查詢與當(dāng)前視口寬度匹配的第一個<source>元素，然后將顯示正確的圖像(在 srcset 屬性中指定)。<img>元素是<picture>元素的最后一個子元素，如果沒有原始源標簽匹配，則作為后備選項。
我們還可以使用圖像密度通過 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è)備本身的屏幕分辨率來決定渲染什么圖像，這在處理高分辨率圖像時可能會有幫助?；旧希@意味著我們可以為支持更高分辨率的屏幕顯示高質(zhì)量的圖片，并以較低的分辨率顯示較小的版本。值得注意的是，雖然移動設(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>給我們提供的基本上是對圖像進行藝術(shù)指導(dǎo)的能力。而且，根據(jù)這個想法，我們可以利用CSS的特性，比如 object-fit 屬性，當(dāng)與 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中設(shè)置minimum和maximum
min() 函數(shù)指定一個元素可以縮小到的絕對最小尺寸。這個函數(shù)在幫助文本大小在不同屏幕大小之間適當(dāng)縮放方面非常有用，比如永遠不要讓流體類型下降到一個清晰的字體大小以下：
- 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() 函數(shù)也是同樣的道理，它也接受兩個值，但不是指定一個元素的最小尺寸，而是定義它的最大尺寸。
- .box {
- width : max(60%, 600px)
- }
如果60%計算出的數(shù)值大于600px，瀏覽器就會使用60%作為寬度。反過來說，如果60%的計算值小于600px，那么將使用600px作為元素的寬度。
鉗制(Clamping)值
我們中的許多人已經(jīng)為clip()叫囂了一段時間，實際上我們在所有現(xiàn)代瀏覽器中都得到了廣泛的支持(對不起，IE)。 clamp() 是 min() 和 max() 函數(shù)的組合，接受三個參數(shù)：
- 最小值
- 首選值，以及
- 最大值
例如：
- .box {
- font-size : clamp(1rem, 40px, 4rem)
- }
瀏覽器會將字體設(shè)置為1rem，直到1rem的計算值大于40px。而當(dāng)計算值大于40px時?是的，瀏覽器在達到4rem后將停止增加大小。你可以看到如何使用 clip() 來使元素變得流暢，而無需使用媒體查詢。
與響應(yīng)單位合作
你是否曾經(jīng)建立過一個大標題或小標題的頁面，并羨慕它在桌面屏幕上看起來有多好，但在移動設(shè)備上檢查時卻發(fā)現(xiàn)它太大了?我肯定會遇到這種情況，在本節(jié)中，我將解釋如何處理此類問題。
在CSS中，你可以使用各種度量單位來確定元素的大小或長度，最常用的度量單位包括：px，em，rem，%，vw 和 vh。雖然，還有一些不常用的單位。我們感興趣的是，px 可以認為是一個絕對單位，而其余的則認為是相對單位。
1. 絕對單位
像素(px)被視為絕對單位，主要是因為像素是固定的，并且不會因其他任何元素的測量而變化?？梢詫⑵湟暈槠渌恍┫鄬挝皇褂玫幕締挝换蚋鶈挝?。試圖使用像素來進行響應(yīng)行為可能會碰到問題，因為它是固定的，但如果你有一些根本不應(yīng)該調(diào)整大小的元素，它們是很好的。
2. 相對單位
相對單位，如 %、em 和 rem，更適合響應(yīng)式設(shè)計，主要是因為它們能夠跨越不同的屏幕尺寸進行縮放。
- vw：相對于視口的寬度
- vh：相對于視口的高度
- rem：相對于根()元素(默認字體大小通常為16px)
- em：相對于父元素
- %：相對于父元素
同樣，大多數(shù)瀏覽器的默認字體大小是 16px ，rem 單位使用它來生成計算值。所以，如果用戶在瀏覽器上調(diào)整字體大小，頁面上的所有內(nèi)容都會根據(jù)根部大小正確縮放。例如，當(dāng)處理一個根為 16px 時，你指定的數(shù)字將乘以該數(shù)字乘以默認大小。例如：
- .8rem = 12.8px (.8 * 16)
- 1rem = 16px (1 * 16)
- 2rem = 32px (2 * 16)
如果你或用戶更改默認大小怎么辦?我們已經(jīng)說過，這些都是相對單位，最終的尺寸值將以新的基本尺寸為基礎(chǔ)。這在媒體查詢中很有用，你只需改變字體大小，整個頁面就會相應(yīng)地放大或縮小。
例如，如果你在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 單位有什么區(qū)別? rem 使用根元素()的字體大小來計算值，而聲明 em 值的元素則引用包含它的父元素的字體大小。如果指定的父元素和根元素的大小不同(例如父元素是18px，但根元素是16px)，那么em和rem將解析為不同的計算值。這讓我們可以更精細地控制我們的元素在不同的響應(yīng)環(huán)境中的響應(yīng)方式。
vh 是視口高度的首字母縮寫，也就是可視屏幕的高度，100vh代表視口高度的100%(取決于設(shè)備)。同理，vw 代表視口寬度，意為設(shè)備的可視屏幕寬度，100vw字面意思是代表100%的視口寬度。
超越媒體查詢
看到了嗎?我們剛剛看了一些非常強大且相對較新的 HTML 和 CSS 功能，它們?yōu)槲覀兲峁┝祟~外的(可能更有效的)構(gòu)建響應(yīng)性的方法。這并不是說這些新技術(shù)取代了我們一直在做的事情。它們只是我們開發(fā)者工具帶中的更多工具，讓我們有更大的控制權(quán)來決定元素在不同上下文中的行為。無論是對字體大小、分辨率、寬度、焦點，還是任何事物的處理，我們對用戶體驗的控制都比以往更加精細。
所以，下次當(dāng)你發(fā)現(xiàn)自己在一個項目上工作時，你希望在特定設(shè)備上對設(shè)計的確切外觀和感覺有更多的控制，看看原生HTML和CSS能幫上什么忙——事情已經(jīng)發(fā)展到令人難以置信的地步了。
