跨瀏覽器媒體查詢 retina 顯示

需求

為 DIV 設置背景圖片，並通過媒體查詢在 2X 顯示器下，顯示 2X 圖片，非 Retina 瀏覽器顯示 1X 圖片。

實現效果

代碼

<div class="bg-block">
</div>
<style>
.bg-block {
    height: 288px;
    width: 512px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: gray;
    background-clip: content-box;
    margin: 40px auto;
    /* non-retina display */
    background-image: url("assets/images/bg.jpg");
}
/* works in ff/chrome/opera/ie>=9/edage */
@media 
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        .bg-block {
            background-image: url("assets/images/bg@2x.jpg");
        }
    }
</style>

跨瀏覽器媒體查詢 retina 顯示

需求

實現效果

代碼

相關文獻