超越媒體查詢：使用更新的特性進行響應式設計

做者：David Atanda
譯者：前端小智
來源：CSS-Tricket

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

除了使用媒體查詢和現代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
• 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>元素來處理響應圖像：

<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）被視爲絕對單位，主要是由於像素是固定的，而且不會因其餘任何元素的測量而變化。 能夠將其視爲其餘一些相對單位使用的基本單位或根單位。 將像素用於響應行爲可能會遇到問題，由於它是固定的，可是若是你有徹底不該調整大小的元素，那麼像素就很棒。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

相對單位

相對單位（例如%，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中將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功能，這些功能爲咱們提供了更多（可能更有效）的響應方式構建方法。 這些新的東西並非取代咱們一直以來所作的事情。 它們只是爲開發人員帶來更多的可選性，可以讓咱們更好地控制肯定元素在不一樣上下文中的行爲。 不管是使用字體大小，分辨率，寬度，焦點仍是其餘任何東西，咱們對用戶體驗的控制都比以往任什麼時候候都要精細。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://css-tricks.com/beyond...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。