如何使用像素爲移動

圖片元素上銳利的圖像，廣泛和迅速得到傳播（http://caniuse.com/#search=picture），我認爲這是爲了避免供應過大/不足的照片，特別是當你要顯示的圖片一樣的好方法在移動和桌面上，視口寬度爲100％。如何使用像素爲移動

能夠解決這樣的：

<img 
    srcset="large.jpg 1920w, 
      medium.jpg 720w, 
      small.jpg 360w" 
    src="medium.jpg">

這使得瀏覽器是聰明，並決定要加載的圖片，但我覺得這種方法的一個問題：許多移動設備具有2像素密度或者更多！因此，當顯示360w時，如果我們希望圖像看起來清晰，我們實際上需要中等圖像。它可以做這樣的：

<picture> 
 
    <source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)"> 
 
    <source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)"> 
 
    <img src="http://goo.gl/LsuU9t"> 
 
</picture>

這裏的問題，在我看來，就是屏幕分辨率成長這可以成長爲多，我們失去了瀏覽器的優點巧妙地決定最佳選項。

所以，我的問題是，如果在這兩個之間的中間點，所以我仍然可以HTML和CSS之間的分離。

來源

2015-09-21 Vandervals

你能在jsfiddle.net –

@Ivinraj爲什麼運行該代碼？他提供了一個SO片段，工作得很好。這也不是關於這裏的代碼，而是關於如何最好地使用圖片元素。對於OP：您可能想使用像placeholder.it這樣的佔位符圖像來提供一個很好的例子，但我認爲這是一個很好的問題。 – somethinghere

我加了段反正 – Vandervals

的瀏覽器中選擇的圖像時需要的像素密度考慮。因此，具有360個CSS px寬視口和2個像素密度的設備將選擇medium.jpg。這正是w描述符和sizes屬性旨在解決的問題！請勿在此處使用picture。

另見https://ericportis.com/posts/2014/srcset-sizes/

來源

2015-09-21 21:29:01 zcorpan

是，它似乎做一些與像素密度，但看看這裏：http://codepen.io/vandervals/pen/ZbOMNR，發現有319個像素寬視，它加載介質IMG，而不是一個小的1個屏幕和2個屏幕的大屏幕。（至少在Chrome中） – Vandervals

我得到1x的小，2倍的中等。您是否在網絡窗格中選中了「禁用緩存」？ – zcorpan

是的，是的，我願意。您正在使用Chrome開發者工具，對嗎？ – Vandervals

如何使用像素爲移動

回答

相關問題