CSS視網膜和非視網膜媒體查詢

我想根據不同的分辨率爲我的網站設置一個背景圖像。我也想包括視網膜媒體查詢，以便如果視網膜設備訪問我的網站，正確的圖像將被加載。事情是，我總是得到這當然不是視網膜最高分辨率...這裏是我的CSSCSS視網膜和非視網膜媒體查詢

<style> 


#background 
{ 
    font-size: large; 
    position: relative; 
    top:50%; 
    left:50%; 
    color: white; 

} 

    @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{ 
    #demo{ 
    width: 100%; 

    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url([email protected]); 
    background-color: rgb(0,0,0); 
    } 
} 

@media screen and (min-width:1025px) 
{ 
    #demo{ 
    width: 100%; 

    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url(demo_BG_1024.png); 
    background-color: rgb(0,0,0); 
    } 
} 

@media screen and (max-width:1024px) 
{ 
    #demo{ 
    width: 100%; 

    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url(demo_BG_1024.png); 
    background-color: rgb(0,0,0); 
    } 
} 

@media screen and (max-width:720px) 
{ 
    #demo{ 
    width: 100%; 

    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url(demo_BG_720.png); 
    background-color: rgb(0,0,0); 
    } 
} 

@media screen and (max-width:320px) 
{ 
     #demo{ 
     width: 100%; 

     height: 100%; 
     background-size: 100%; 
     background-repeat: no-repeat; 
     position:absolute; 
     background-image: url(demo_BG_320.png); 
     background-color: rgb(0,0,0); 
    } 
} 
</style>

來源

2015-06-08 user3485417

你必須使用-webkit-min-device-pixel-ratio:1非視網膜。

非視網膜。

@media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1) 
{ 
    #demo{ 
    width: 100%; 
    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url([email protected]); 
    background-color: rgb(0,0,0); 
    } 
}

視網膜

@media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{ 
    #demo{ 
    width: 100%; 
    min-height: 800px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:absolute; 
    background-image: url([email protected]); 
    background-color: rgb(0,0,0); 
    } 
}

來源

2015-06-08 11:12:35 Prime

謝謝你的建議;）爲什麼Firefox不顯示現在的背景是什麼？ – user3485417

只有firefox？它不應該在任何瀏覽器上工作，因爲我用1x.png而不是用於非視網膜媒體的2x.png圖像。 – Prime

現在我完全失去了能不能給我一個工作的例子？我是視網膜新手。謝謝 – user3485417

要添加到@BaTmaN的答案，它很可能沒有在Firefox BC工作/示例代碼使用webkit的前綴。對於其他瀏覽器，您需要使用正確的瀏覽器前綴：例如。

only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5)

來源

2015-08-20 14:17:32 ako977

'min-device-pixel-ratio'不是一個標準。任何瀏覽器都不支持前綴版本。唯一有用的表示法是帶有webkit前綴的表示法，爲其他瀏覽器添加'min-resolution'。 – inta

我不使用媒體查詢，我使用retina.js。所有你需要做的就是包含retina.js文件和主機的兩個版本的圖像 - image.png和[email protected]（例如）。

然後，JavaScript會檢查頁面上的所有圖像，並在視網膜顯示器上自動顯示高分辨率圖像（@2x- Apple的預定義標識符）（如果可用）或顯示正常圖像（如果不可用）。非視網膜顯示器將提供非@2x版本。

點擊此處瞭解詳情：http://imulus.github.io/retinajs/

來源

2015-08-20 16:01:35 Lyall

對不起我downvoted，因爲我明確要求媒體查詢和HTML，CSS和視網膜顯示標記。你怎麼能用Javascript解決方案來回答這個問題？我不明白。 – inta

@inta我正在提供一種可能的選擇，也許該操作沒有考慮到，並且這是一個更簡單的方法。例如，我嘗試使用媒體查詢時遇到了問題，因爲我沒有聽說過retina.js，但實際上它是一種更簡單的方法。 – Lyall

CSS視網膜和非視網膜媒體查詢

回答

相關問題