超越媒體查詢：使用更新的特性進行響應式設計
文本已經過 David Atanda 授權翻譯。
除了使用媒體查詢和現代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。注意，我們仍以這種方式使用媒體查詢，但是
媒體查詢會根據圖片的大小適當地添加:
- 大于等于1000px的視口加載picture.png
- 601px到999px之間的視口加載image-lg.png
- 介于401px和600px之間的視口加載picture-mid.png
- 小于400px的會加載image-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>元素的最后一個子元素是必需的，如果沒有一個source標簽與之匹配，則作為一個回退選項。
我們還可以使用srcset屬性使用圖像密度來處理僅使用元素來處理響應圖像：
- <img
- srcset="
- flower4x.png 4x,
- flower3x.png 3x,
- flower2x.png 2x,
- flower1x.png 1x
- "
- src="flower-fallback.jpg"
- >
我們可以做的另一件事是根據設備本身的屏幕分辨率(通常以每英寸的點或dpi來衡量)在CSS中編寫媒體查詢，而不僅僅是設備視口。這意味著不是下面這種寫法
- @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中設置最小值和最大值
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作為元素的寬度
限定值
clamp() 函數的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數：最小值、首選值、最大值。clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被允許的。
clamp(MIN, VAL, MAX) 其實就是表示 max(MIN, min(VAL, MAX))，例如：
- .box {
- font-size : clamp(1rem, 40px, 4rem)
- }
瀏覽器會將字體設置為1rem，直到1rem的計算值大于40px。而當計算值大于40px時?是的，瀏覽器在達到4rem后將停止增加大小。
使用響應單位
你是否曾經建立過一個帶有大標題或副標題的頁面，并且在 PC 屏幕上的顯示效果良好，但在移動設備上卻發現它太大了?我猜肯定會遇到這種情況，在本節中，我們將介紹如何處理此類問題。
在CSS中，你可以使用各種度量單位來確定元素的大小或長度，最常用的度量單位包括：px，em，rem，%，vw``和vh。雖然，還有一些不常用的單位。我們感興趣的是px可以視為絕對單位，而其余的則可以視為相對單位。
絕對單位
像素(px)被視為絕對單位，主要是因為像素是固定的，并且不會因其他任何元素的測量而變化。可以將其視為其他一些相對單位使用的基本單位或根單位。將像素用于響應行為可能會遇到問題，因為它是固定的，但是如果你有完全不應調整大小的元素，那么像素就很棒。
1
相對單位
相對單位(例如%，em和rem)更適合于響應式設計，這主要是因為它們具有跨不同屏幕尺寸縮放的能力。
- vw：相對于視口的寬度
- vh：相對于視口的高度
- rem:相對于根元素()(默認字體大小通常為16px)
- em:相對于父元素
- %：相對于父元素
同樣，大多數瀏覽器的默認字體大小為16px，這是rem單位用來生成其計算值的字體。因此，如果用戶在瀏覽器上調整字體大小，則頁面上的所有內容都將根據根大小正確縮放。例如，當處理根集為16px時，我們指定的數字將乘以該數字乘以默認大小。例如：
- .8rem = 12.8px (.8 * 16)
- 1rem = 16px (1 * 16)
- 2rem = 32px (2 * 16)
如果想更改默認大小怎么辦?正如前面所介紹，這些是相對單位，最終尺寸值將基于新的基值。這在媒體查詢中就非常有用，我們只需更改字體大小，然后整個頁面就會相應地放大或縮小。
例如，如果你在CSS中將font-size更改為10px，則計算出的尺寸最終將是：
- 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單位有什么區別?
rem使用根（<html>）元素的字體大小計算值，而聲明em值的元素引用包含它的父元素的字體大小。如果指定的父元素的大小與根元素的大小不同（例如，父元素為18px，但根元素為16px），則em和rem將解析為不同的計算值。這使我們可以更細粒度地控制元素在不同響應上下文中的響應方式。
vh是視口高度或可見屏幕高度的首字母縮寫。100vh代表視口高度的100%(取決于設備)。同樣，vw代表視口寬度，這意味著設備的可視屏幕寬度，而100vw則代表視口寬度的100%。
超越媒體查詢
以上，我們只研究了許多真正強大且相對較新的HTML和CSS功能，這些功能為我們提供了更多(可能更有效)的響應方式構建方法。這些新的東西并不是取代我們一直以來所做的事情。它們只是為開發人員帶來更多的可選性，可讓我們更好地控制確定元素在不同上下文中的行為。無論是使用字體大小，分辨率，寬度，焦點還是其他任何東西，我們對用戶體驗的控制都比以往任何時候都要精細。
作者：David Atanda 譯者：前端小智 來源：CSS-Tricket
原文：https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
