關於max-width屬性的CSS媒體查詢使平板電腦和桌面的大小爲1024px大小

Question

我仍在試圖弄清楚媒體查詢是如何工作的。我有兩種媒體查詢，一種是針對平板電腦的max-width：1024px，另一種針對的是max-device-width：1024px。

我面臨的問題是，當我測試它在我的iPad就跳過最大設備寬度：1,024，去爲最大寬度：1,024。

我的問題是我怎麼能寫一個媒體查詢爲桌面和平板電腦最大寬度1024px？

我想在1024寬度的桌面和平板的一個的原因是因爲我需要不同的風格。

我的CSS代碼在下面。

@media screen and (max-device-width: 1024px) and (orientation: portrait) 
     {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
      { 
      height: 26%;left: 5%; 
      } 
     } 

    @media screen and (max-width: 1024px) 
     {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
      { 
      height: 45%;left: 5%; 
      } 
     } 

Answer 1

檢查Media Queries for Standard Devices。它可能是有用的

Answer 2

這一套適合的「平板電腦和桌面」媒體查詢

移動

only screen and (min-width: 480px) { ... } 

平板

only screen and (min-width: 480px) { ... } 
only screen and (min-width:321px) and (max-width:768px) { ... } 
only screen and (min-width: 768px) { ... } 

桌面

only screen and (min-width: 992px) { ... } 

巨大

only screen and (min-width: 1280px) { ... } 

Answer 3

我會建議你使用這個媒體查詢現有查詢內，以確保它與視網膜分辨率的設備

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ }