2016-06-24 90 views
0

我不是一個強大的編碼器,並且有媒體查詢語法問題,我真的可以使用一些幫助。我發現一個query specifically for high dpi devices,並希望用它來顯示不同的圖形,如果設備的dpi足夠高。但是,我也希望這個查詢只在屏幕低於特定的最大寬度時才起作用,這就是我在添加它時遇到的麻煩。下面是我一直在嘗試的(所以最後一行是我添加的),但它不起作用。任何幫助是極大的讚賞!媒體查詢語法問題

@media 
 
    only screen and (-webkit-min-device-pixel-ratio: 1.3), 
 
\t only screen and (-o-min-device-pixel-ratio: 13/10), 
 
\t only screen and (min-resolution: 120dpi), 
 
    and (max-width: 48em)

+0

http://stackoverflow.com/help/mcve –

回答

0
@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and ( min--moz-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and ( -o-min-device-pixel-ratio: 13/10) and (max-width: 48em), 
only screen and (  min-device-pixel-ratio: 1.3)  and (max-width: 48em), 
only screen and (   min-resolution: 120dpi)  and (max-width: 48em) 
{ 

    /* Bla bla Bla bla**/ 

} 
+0

Bringo!在多個設備上測試,就像一個魅力! (我確實刪除了「,」和「(」,最後假設他們是錯別字)。 – datCodeTho

+0

歡迎您 – HudsonPH

0

目前,(max-width: 48em)被添加到觸發查詢方案列表中。

你想指定每個情景兩個標準的查詢,如:

@media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 48em), 
     only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 48em), 
     only screen and (min-resolution: 120dpi) and (max-width: 48em) 
     { 
     // Higher res image here 
     } 
+0

工作得很好,但我假設HudsonPH的查詢蓋更多瀏覽器。 – datCodeTho

+0

在這個世界上沒有正義 – Sam