如何輸出不同的圖像取決於用戶屏幕？

例如，如果我爲我的網站有兩組圖像，一組是低分辨率，另一組是高分辨率，我將低分辨率顯示爲1280寬度用戶的屏幕尺寸，其他是高分辨率圖像，我怎樣才能做到這一點？使用javascript？或任何其他方法？可以在CSS或HTML中定義？如何輸出不同的圖像取決於用戶屏幕？

來源

2012-12-08 FatDogMark

您可以使用CSS media queries。有關媒體查詢的更多信息here。

實施例：

/* This block applies to all "screen" devices 
*/ 
@media screen { 
    .some-content { 
     background-image: url(largeimage.jpg); 
    } 
} 

/* This media query applies only to "screen" devices with 
    a maximum width of 1279px (e.g., < 1280) 
*/ 
@media screen and (max-width: 1279px) { 
    /* Use `mediumimage.jpg` on these devices instead of the above */ 
    .some-content { 
     background-image: url(mediumimage.jpg); 
    } 
} 

/* This media query applies only to "screen" devices with 
    a maximum width of 639px (e.g., < 640) 
*/ 
@media screen and (max-width: 639px) { 
    /* Use `smallimage.jpg` on these devices instead of the above */ 
    .some-content { 
     background-image: url(smallimage.jpg); 
    } 
}

注意上述的遞減順序：首先，我們指定最大設備，然後較小的，則較小的，從而使後者的查詢重寫早期的（因爲有一個設備例如1024像素的屏幕將與前兩個規則匹配）。

來源

2012-12-08 10:16:43

呃sooo很長時間閱讀關於 – FatDogMark

@FatDogMark：好的，努力是成功的事情需要，是的。短版本是'some_selector {/ *使用大圖像* /} @media所有和（最大寬度：1279px）{same_selector {/ *使用較小的圖像* /}}' –

所以css的語法是@media all和（最大寬度：1279px），對於html是media ='all和（max-width：1279px）'？好的 – FatDogMark

你可以用類似於的東西來設計body {width：100％;身高：100％;位置：相對;}

您將面臨瀏覽器兼容性問題。

在你的css中定義它你可以擁有你想要的任何類。我已經爲我的網站完成了它，並且可以爲您工作。

來源

2012-12-08 10:21:03

如何輸出不同的圖像取決於用戶屏幕？

回答

相關問題