媒體查詢語法問題

我不是一個強大的編碼器，並且有媒體查詢語法問題，我真的可以使用一些幫助。我發現一個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)

來源

2016-06-24 datCodeTho

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

@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**/ 

}

來源

2016-06-24 14:55:35 HudsonPH

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

歡迎您 – HudsonPH

目前，(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 
     }

來源

2016-06-24 14:54:20 Sam

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

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

媒體查詢語法問題

回答

相關問題