響應式圖片(自適應圖片)

klinson 發布于2019-08-02 14:21 / 2066人閱讀

摘要：雖然在簡單圖形圖案界面元素等方面較好，但如果是有大量的細節的照片，創建矢量圖像會變得非常復雜。為了兼容老舊瀏覽器，我們可以在標簽當中指定類型，使用屬性，并在當中指定相應格式的圖片

在這篇文章中討論的新特性 — srcset/sizes/ — 都已經被新版本的現代瀏覽器和移動瀏覽器所支    持（包括Edge，而不是IE）。

解決的問題

分辨率切換問題：小屏手機屏幕上顯示網頁，那么沒有必要在網頁上嵌入pc端的大圖片，浪費帶寬

藝術方向問題：當網站在狹窄的屏幕上觀看時，顯示一幅包含了重要細節的裁剪版圖片，而不是顯示pc端的大圖，這樣會顯得圖片縮小，重要地方不突出

分辨率切換問題 不同分辨率加載不同尺寸的圖片

需要說明的幾點如下:

srcset語法: "圖片路徑物理像素, 圖片路徑物理像素, ....."

size: "媒體查詢 css像素"

src: 當瀏覽器不支持上面的屬性的時候，默認加載這里

加載的流程如下:

查看設備寬度

檢查sizes列表中哪個媒體條件是第一個為真

查看給予該媒體查詢的槽大小

加載srcset列表中引用的最接近所選的槽大小的圖像

在很多pc端上，1px=1w

不同的分辨率加載相同的尺寸


     
img {
    width: 320px;
}

一般情況下當我們給img設置固定的寬的時候,為了在不同的dpr設備上顯示相同的大小，可以配合x來，例如1.5x代表dpr為1.5的設備

藝術問題

需要說明的幾點:

source當中的也可以使用srcset、sizes屬性

必須提供一個img元素，以備瀏覽器不支持的時候使用

為什么不使用css和javaScript來完成圖片替換

因為你不能先加載好元素后, 再用 JavaScript 檢測視圖的寬度，如果覺得大小不合適，就動態地加載小的圖片替換已經加載好的圖片，這樣的話, 原始的圖像已經被加載了, 然后你也加載了小的圖像, 這樣的做法對于響應式圖像的理念來說，是很糟糕的。

另一種方式svg

位圖由以像素為單位的寬和高表示，如果位圖顯示的尺寸大于原始尺寸，一張較小的位圖看來會有顆粒感（然而矢量圖不會這樣）

但是它不適用于所有的圖片，在某種程度上是這樣的——它們無論是文件大小還是比例都合適，無論在哪里你都應該盡可能的使用它們。

雖然在簡單圖形、圖案、界面元素等方面較好，但如果是有大量的細節的照片，創建矢量圖像會變得非常復雜。加載會消耗更多的帶寬。

使用現代圖像格式

有很多令人激動的新圖像格式（例如WebP和JPEG-2000）可以在有高質量的同時有較低的文件大小。然而，瀏覽器對其的支持參差不齊。

為了兼容老舊瀏覽器，我們可以在標簽當中指定MIME類型，使用type屬性，并在srcset當中指定相應格式的圖片

GPU云服務器云服務器圖片自適應圖片大小自適應 css圖片自適應 asp圖片自適應

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

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

（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

rockswang 2019-08-20 14:45 評論0 收藏0
（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

dockerclub 2019-08-30 15:53 評論0 收藏0
（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

Ilikewhite 2019-08-01 16:24 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
移動前端 - 收藏集 - 掘金

摘要：使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未完全加載出來之前，就會導致出現（圖一）的這種情況，原因是因為...

Jochen 2019-08-29 12:43 評論0 收藏0