成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

stefanieliang / 1055人閱讀

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

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

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

srcset屬性

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

當(dāng)listing圖片時(shí)，我們提供每張圖片兩個(gè)信息 ——

圖片文件的_路徑_

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

在圖片 src 中定義的默認(rèn)為圖片的 1x 。

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

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

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

sizes屬性

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

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可以使用任意的長(zhǎng)度單位，比如：em, rem, pixels, 和 viewport width。

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

合體

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

瀏覽器支持

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

譯自：Responsive Images - The srcset and sizes Attributes

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115046.html

相關(guān)文章

  • (譯)響應(yīng)式圖片— srcset 和 sizes 屬性

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

    alogy 評(píng)論0 收藏0

  • [譯]如何構(gòu)建自己的Progressive Image Loader

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

    cartoon 評(píng)論0 收藏0

  • 老生常談之響應(yīng)式開發(fā)

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

    csRyan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<