超越媒體查詢：使用更新的特性進(jìn)行響應(yīng)式設(shè)計(jì)
文本已經(jīng)過 David Atanda 授權(quán)翻譯。
除了使用媒體查詢和現(xiàn)代CSS布局(例如flexbox和grid)來創(chuàng)建響應(yīng)式網(wǎng)站之外，我們使用一些比較不太被用或者比較新的特性來制作響應(yīng)式網(wǎng)站。在本文中，我們將探討許多可用的工具(圍繞HTML和CSS)，從響應(yīng)圖像到相對較新的CSS函數(shù)，無論我們是否使用媒體查詢，它們都可以正常工作。
實(shí)上，當(dāng)媒體查詢與這些功能一起使用時(shí)，它更像是一種補(bǔ)充，而不是一種完整的方法。讓我們看看它是如何工作的。
真正的響應(yīng)圖像
對于圖片，我們經(jīng)常使用 width: 100% 來適配圖片，這種方法是挺有效的，但是對于較大的屏幕，如果圖片像素不夠高則會讓圖像看起來有些糊涂，同時(shí)這種方法也有一些缺點(diǎn)，其中比較值得注意的是：
- 圖像可能會變形到失去焦點(diǎn)的程度。
- 屏幕較小的設(shè)備也要下載在大屏幕展現(xiàn)的大尺寸圖片。
在網(wǎng)頁上使用圖像時(shí)，我們必須確保它們在分辨率和大小方面得到了優(yōu)化。原因是為了確保我們有適合正確設(shè)備的正確圖像分辨率，因此我們最終不會為較小的屏幕下載尺寸過大的圖像，而這最終可能會降低網(wǎng)站的性能 ??。
簡而言之，我們需要將較大的高分辨率圖像發(fā)送到較大的屏幕，而將較小的低分辨率版本發(fā)送到較小的屏幕，從而改善性能和用戶體驗(yàn) ??。
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。注意，我們?nèi)砸赃@種方式使用媒體查詢，但是
媒體查詢會根據(jù)圖片的大小適當(dāng)?shù)靥砑?
- 大于等于1000px的視口加載picture.png
- 601px到999px之間的視口加載image-lg.png
- 介于401px和600px之間的視口加載picture-mid.png
- 小于400px的會加載image-sm.png
有趣的是，我們還可以在URL后面通過圖像密度1x, 2x, 3x等等來標(biāo)記每個圖像。如果我們按比例制作不同的圖片，這種方法就能奏效。這允許瀏覽器根據(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)的兩個標(biāo)簽：<source>和<img>。
瀏覽器查找媒體查詢與當(dāng)前視口寬度匹配的第一個<source>元素，然后它將顯示適當(dāng)?shù)膱D像(在srcset屬性中指定)。<img>元素作為<picture>元素的最后一個子元素是必需的，如果沒有一個source標(biāo)簽與之匹配，則作為一個回退選項(xiàng)。
我們還可以使用srcset屬性使用圖像密度來處理僅使用元素來處理響應(yīng)圖像：
- <img
- srcset="
- flower4x.png 4x,
- flower3x.png 3x,
- flower2x.png 2x,
- flower1x.png 1x
- "
- src="flower-fallback.jpg"
- >
我們可以做的另一件事是根據(jù)設(shè)備本身的屏幕分辨率(通常以每英寸的點(diǎn)或dpi來衡量)在CSS中編寫媒體查詢，而不僅僅是設(shè)備視口。這意味著不是下面這種寫法
- @media only screen and (max-width: 600px) {
- /* Style stuff */
- }
而是
- @media only screen and (min-resolution: 192dpi) {
- /* Style stuff */
- }
這種方法允許我們根據(jù)設(shè)備本身的屏幕分辨率來決定渲染什么圖像，這在處理高分辨率圖像時(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>給予了強(qiáng)大的圖片響應(yīng)能力，為了與這個想法保持一致，我們可以利用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è)置最小值和最大值
min()函數(shù)指定元素可以縮小到的絕對最小大小。幫助文本大小在不同的屏幕大小上正確縮放方面，該功能非常有用，例如從不讓流暢的字體大小降低到清晰的字體大小以下：
- html {
- font-size: min(1rem, 22px); /* Stays between 16px and 22px */
- }
min()接受兩個值，它們可以是相對，百分比或固定單位。在此示例中，我們告訴瀏覽器永遠(yuǎn)不要讓.box類的元素的寬度減小到45%或600px以下(以視口寬度為準(zhǔn)，以最小者為準(zhǔn))：
- .box {
- width : min(45%, 600px)
- }
如果45%計(jì)算得出的值小于600px，則瀏覽器將使用45%作為寬度。相反，如果45%計(jì)算得出的值大于600px，則將使用600px作為元素的寬度。
max()函數(shù)也有類似的情況。它也接受兩個值，但是我們沒有定義元素的最小尺寸，而是定義了它可以獲取的最大尺寸。
- .box {
- width : max(60%, 600px)
- }
如果60%計(jì)算得出的值大于600px，則瀏覽器將使用60%作為寬度。相反，如果60%的值小于600px，則將使用600px作為元素的寬度
限定值
clamp() 函數(shù)的作用是把一個值限制在一個上限和下限之間，當(dāng)這個值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個值使用。它接收三個參數(shù)：最小值、首選值、最大值。clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被允許的。
clamp(MIN, VAL, MAX) 其實(shí)就是表示 max(MIN, min(VAL, MAX))，例如：
- .box {
- font-size : clamp(1rem, 40px, 4rem)
- }
瀏覽器會將字體設(shè)置為1rem，直到1rem的計(jì)算值大于40px。而當(dāng)計(jì)算值大于40px時(shí)?是的，瀏覽器在達(dá)到4rem后將停止增加大小。
使用響應(yīng)單位
你是否曾經(jīng)建立過一個帶有大標(biāo)題或副標(biāo)題的頁面，并且在 PC 屏幕上的顯示效果良好，但在移動設(shè)備上卻發(fā)現(xiàn)它太大了?我猜肯定會遇到這種情況，在本節(jié)中，我們將介紹如何處理此類問題。
在CSS中，你可以使用各種度量單位來確定元素的大小或長度，最常用的度量單位包括：px，em，rem，%，vw``和vh。雖然，還有一些不常用的單位。我們感興趣的是px可以視為絕對單位，而其余的則可以視為相對單位。
絕對單位
像素(px)被視為絕對單位，主要是因?yàn)橄袼厥枪潭ǖ?，并且不會因其他任何元素的測量而變化?？梢詫⑵湟暈槠渌恍┫鄬挝皇褂玫幕締挝换蚋鶈挝弧⑾袼赜糜陧憫?yīng)行為可能會遇到問題，因?yàn)樗枪潭ǖ模侨绻阌型耆粦?yīng)調(diào)整大小的元素，那么像素就很棒。
1
相對單位
相對單位(例如%，em和rem)更適合于響應(yīng)式設(shè)計(jì)，這主要是因?yàn)樗鼈兙哂锌绮煌聊怀叽缈s放的能力。
- vw：相對于視口的寬度
- vh：相對于視口的高度
- rem:相對于根元素()(默認(rèn)字體大小通常為16px)
- em:相對于父元素
- %：相對于父元素
同樣，大多數(shù)瀏覽器的默認(rèn)字體大小為16px，這是rem單位用來生成其計(jì)算值的字體。因此，如果用戶在瀏覽器上調(diào)整字體大小，則頁面上的所有內(nèi)容都將根據(jù)根大小正確縮放。例如，當(dāng)處理根集為16px時(shí)，我們指定的數(shù)字將乘以該數(shù)字乘以默認(rèn)大小。例如：
- .8rem = 12.8px (.8 * 16)
- 1rem = 16px (1 * 16)
- 2rem = 32px (2 * 16)
如果想更改默認(rèn)大小怎么辦?正如前面所介紹，這些是相對單位，最終尺寸值將基于新的基值。這在媒體查詢中就非常有用，我們只需更改字體大小，然后整個頁面就會相應(yīng)地放大或縮小。
例如，如果你在CSS中將font-size更改為10px，則計(jì)算出的尺寸最終將是：
- html {
- font-size : 10px;
- }
- 1rem = 10px (1 * 10)
- 2rem = 20px (2 * 10)
- .5rem = 5px (.5 * 10)
注意:這也適用于百分比1%,例如
- 100% = 16px;
- 200% = 32px;
- 50% = 8px;
rem和em單位有什么區(qū)別?
rem使用根（<html>）元素的字體大小計(jì)算值，而聲明em值的元素引用包含它的父元素的字體大小。如果指定的父元素的大小與根元素的大小不同（例如，父元素為18px，但根元素為16px），則em和rem將解析為不同的計(jì)算值。這使我們可以更細(xì)粒度地控制元素在不同響應(yīng)上下文中的響應(yīng)方式。
vh是視口高度或可見屏幕高度的首字母縮寫。100vh代表視口高度的100%(取決于設(shè)備)。同樣，vw代表視口寬度，這意味著設(shè)備的可視屏幕寬度，而100vw則代表視口寬度的100%。
超越媒體查詢
以上，我們只研究了許多真正強(qiáng)大且相對較新的HTML和CSS功能，這些功能為我們提供了更多(可能更有效)的響應(yīng)方式構(gòu)建方法。這些新的東西并不是取代我們一直以來所做的事情。它們只是為開發(fā)人員帶來更多的可選性，可讓我們更好地控制確定元素在不同上下文中的行為。無論是使用字體大小，分辨率，寬度，焦點(diǎn)還是其他任何東西，我們對用戶體驗(yàn)的控制都比以往任何時(shí)候都要精細(xì)。
作者：David Atanda 譯者：前端小智 來源：CSS-Tricket
原文：https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
