(譯)響應式圖片— srcset 和 sizes 屬性

alogy 發(fā)布于2019-08-01 15:04 / 2456人閱讀

摘要：在響應式網(wǎng)頁設計的革命中，圖片看起來是被浪潮落下的一個事物。元素展示了很多改變這個局面的希望，但無論元素是否可以完全使用，現(xiàn)在有兩個對于響應式圖片很關鍵的兩個屬性和。

在響應式網(wǎng)頁設計的革命中，圖片看起來是被浪潮落下的一個事物。直到最近，根據(jù)不同的屏幕尺寸和像素密度來提供不同的圖片還是沒有完全實現(xiàn)。

元素展示了很多改變這個局面的希望，但無論picture元素是否可以完全使用，現(xiàn)在有兩個對于響應式圖片很關鍵的兩個屬性 —— srcset 和 sizes。

srcset屬性

srcset屬性允許我們可以提供一系列也許可以被瀏覽器使用的圖片資源。我們提供一個以逗號為分割的圖片list，user agent會根據(jù)設備特性來決定哪一張圖片來顯示在網(wǎng)頁上。

當listing圖片時，我們提供每張圖片兩個信息 ——

圖片文件的_路徑_

圖片文件的_寬度_或者_像素密度_
為了定義_像素密度_，我們添加一個x來表示圖片的密度數(shù)值。舉個栗子 —-

在圖片 src 中定義的默認為圖片的 1x 。

在2012年srcset屬性第一次提出時，我們只能提供不同的像素密度的圖片，就像上面例子中顯示的。然而，在2014年新添加了width屬性，它可以使我們根據(jù)不同的寬度來提供不同的圖片。

為了指定圖片的寬度，我們添加一個w來表示圖片的像素寬度。舉個栗子 —-

只有在srcset中使用了寬度，我們才能隨之設置sizes屬性。

sizes屬性

sizes屬性明確定義了圖片在不同的media conditions下應該顯示的尺寸。

Media Conditions

Media Conditions不是確切的媒體查詢。它是一部分的媒體查詢。他不允許我們明確定義媒體類型，比如 screen或者 print，但是允許我們經(jīng)常使用的媒體查詢。

可以使用的有 —-

A plain media condition 比如(min-width: 900px)

A “not” media condition 比如( not (orientation: landscape) )

An “and” media condition 比如(orientation: landscape) and (min-width: 900px)

An “or” media condition 比如( (orientation: portrait) or (max-width: 500px) )

width

width可以使用任意的長度單位，比如：em, rem, pixels, 和 viewport width。

然而，百分比單位是不允許的，如果需要使用相對單位，vw是推薦使用的。

合體

把Media Conditions?和 width 合在一起 —-

瀏覽器支持

對于不支持這個屬性的瀏覽器，只是加載src里的圖片資源。

譯自：Responsive Images - The srcset and sizes Attributes

云服務器 GPU云服務器響應式響應式布局響應式網(wǎng)站響應式設計

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49748.html

(譯)響應式圖片— srcset 和 sizes 屬性

摘要：在響應式網(wǎng)頁設計的革命中，圖片看起來是被浪潮落下的一個事物。元素展示了很多改變這個局面的希望，但無論元素是否可以完全使用，現(xiàn)在有兩個對于響應式圖片很關鍵的兩個屬性和。在響應式網(wǎng)頁設計的革命中，圖片看起來是被浪潮落下的一個事物。直到最近，根據(jù)不同的屏幕尺寸和像素密度來提供不同的圖片還是沒有完全實現(xiàn)。元素展示了很多改變這個局面的希望，但無論picture元素是否可以完全使用，現(xiàn)在有兩個...

stefanieliang 2019-08-30 12:46 評論0 收藏0
[譯]如何構建自己的Progressive Image Loader

摘要：最后，我們必須調用函數(shù)來檢查所有的漸進式圖片容器在首次運行時是否在頁面上可見。我們還必須在滾動頁面或調整瀏覽器大小時調用函數(shù)，在一些舊的瀏覽器主要指可以非常迅速地對這些事件作出回應，所以我們需要限制回調，以確保它不能在毫秒內被再一次調用。你可以在Facebook和Medium上遇到過漸進式圖片，當頁面滾動到視圖時，模糊的低分辨率圖像會被清晰的全分辨率版本替換。 showImg(htt...

cartoon 2019-08-29 12:14 評論0 收藏0
老生常談之響應式開發(fā)

摘要：什么是響應式設計作為一名合格的前端開發(fā)攻城獅工程師，做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢這個時候響應式開發(fā)就應運而生了。五標簽的屬性除了響應式圖像，標簽還可以用來選擇不同格式的圖像。什么是響應式設計？作為一名合格的前端開發(fā)攻城獅（工程師），做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢？這...

csRyan 2019-08-30 11:10 評論0 收藏0