請注意，不是iPhone。我們說的是廉價電話。更重要的是，他們中的許多人都是用有限的數(shù)據(jù)計劃來實現(xiàn)這一目標的。

這意味著我們必須設(shè)計我們的網(wǎng)站來考慮這一點，這意味著為移動網(wǎng)絡(luò)優(yōu)化圖像。光柵圖像（如.jpeg文件）不適合響應(yīng)式設(shè)計。他們的測量被設(shè)計成固定的，大的可以占用帶寬。

如果你想為你和你的用戶降低成本，同時確保你的網(wǎng)站總是最好的，你就需要找到一種方法讓你的圖像響應(yīng)。好消息是人們正在努力解決這個問題。已經(jīng)有一些解決方案了。訣竅是知道哪一個最適合你。
讓我們從第一個也是最簡單的選項開始：
最大寬度：100%；
簡單地說，您設(shè)置了一點CSS來應(yīng)用于所有圖像。一旦到位，它將確保您的所有圖像保持在其父元素內(nèi)部。這樣，當人們在較小的屏幕上查看你的網(wǎng)站時，圖像一定會縮小。
例子：
最大寬度：100%；
贊成的意見
它很簡單，只要不設(shè)置任何像素特定的圖像高度，它就可以完美地工作。
你根本不需要改變你的HTML。常規(guī)的<img>標記完成任務(wù)。
通用瀏覽器支持。
欺騙
視網(wǎng)膜屏幕：除非你把所有的圖像都做成實際像素尺寸的兩倍，否則在某些機器上，比如mac，以及現(xiàn)在的一些Android設(shè)備上，它們看起來會很時髦。怪蘋果。我愿意。
使用大量巨大的圖像（不管你是否在處理視網(wǎng)膜屏幕），可能會對移動設(shè)備的性能造成影響。更糟糕的是，他們會吃掉有限數(shù)據(jù)計劃中的數(shù)據(jù)。如果你能幫忙的話，你不想對你的用戶這么做。
這種簡單的技術(shù)有它的位置，但它并不適合所有的情況。如果您的網(wǎng)站將為移動設(shè)備上的用戶提供大量圖像，您可能需要實現(xiàn)以下建議的解決方案之一。
注意：下面兩個解決方案包含在HTML5規(guī)范中。隨著時間的推移，它們將成為“官方”解決方案，因為越來越多的瀏覽器開始全面支持它們。
rcset公司
通常，在將圖像嵌入頁面時，只定義一個“源”，格式為src屬性，如下所示：
<img src=“/img\u文章/22532/隨便什么.jpg“alt=”隨便“>
srcset屬性允許您添加圖像的其他版本，設(shè)置這些圖像顯示的屏幕寬度，并讓瀏覽器做出決定。這意味著用戶的設(shè)備只下載適合其屏幕大小的圖像。
你可以這樣設(shè)置：
<img src=“/img\u文章/22532/-小.jpg“srcset=”隨便-中.jpg1000w，隨便吧-大.jpg2000w“alt=”隨便“>
贊成的意見
你讓瀏覽器來計算。為正確的屏幕大小選擇合適的圖像可能會很棘手，如果您使用了大量圖像，您可能不想麻煩。
你在節(jié)省帶寬。這意味著降低托管成本，降低移動用戶的數(shù)據(jù)成本。
部分瀏覽器支持。實際上，這是列表中第二個受支持的選項。
欺騙
它只是部分瀏覽器支持。要使它在舊的瀏覽器（包括一些移動瀏覽器）中工作，您需要使用一點稱為polyfill的JavaScript。
兩個這樣的polyfill是srcset polyfill和picturefill。順便說一句，picturefill還提供了對<picture>元素的瀏覽器支持，下一個就是這個元素。
最后，在單個<img>標記上使用srcset屬性可能是將來人們最常使用的選項。當我們大多數(shù)人為了節(jié)省帶寬而使用同一幅圖像的幾個不同大小的版本時，這才有意義。
反應(yīng)靈敏的圖像
<圖片>
srcset只是一個可以應(yīng)用于任何圖像的屬性，<picture>是一個完整的元素，有自己的標簽和所有東西。不過，它的一般用途是一樣的。告訴瀏覽器一個圖像有幾個不同的版本，以及顯示它們的屏幕大小。
區(qū)別在于數(shù)學(xué)。如果只使用srcset，瀏覽器將根據(jù)正在查看站點的瀏覽器的屏幕或窗口大小進行一些計算。您可以給出提示，但瀏覽器本身會發(fā)出調(diào)用。
使用<picture>，您可以完全控制。如果你說一個特定的圖像應(yīng)該以一定的屏幕寬度顯示，那么這就是將要顯示的內(nèi)容。這樣做的代價是更多的代碼。因此，通常建議在處理同一圖像的不同大小時使用srcset。<picture>將在您進行藝術(shù)指導(dǎo)時使用，并且可能希望以特定的屏幕大小顯示完全不同的圖像。
代碼如下所示：
<圖片>
<source srcset=“隨便-較小.jpg“media=”（最大寬度：768px）“>
<source srcset=“隨便-默認.jpg">
<img srcset=“隨便-默認.jpg“alt=”隨便“>
</picture>
贊成的意見
同樣，你可以節(jié)省帶寬。這種好處是巨大的，值得重復(fù)。
可以更好地控制以特定屏幕大小顯示的圖像。
欺騙
更多代碼。當你不需要的時候不要使用這個元素，你會有一個更輕松的時間處理事情。
目前很少有瀏覽器支持。為了能夠使用這個元素，您需要使用上面列出的polyfill。
自適應(yīng)圖像

本文地址：http://www.xyxhh.com/wangzhansheji/25-400.html