媒體查詢爲iPad和桌面（最大寬度）

我想一些CSS代碼既iPad和臺式機，最大寬度的目標：768媒體查詢爲iPad和桌面（最大寬度）

這（我不知道爲什麼，會很高興要知道）不爲iPad（僅適用於臺式機）工作：

@media only screen and (max-width: 768px)

，所以我不得不來此爲iPad：

@media only screen and (device-width: 768px)

不過，我有兩種介質內完全相同的代碼查詢和我不能接受。

我想這也：

@media only screen and (max-width: 767px) or (device-width: 768px)

這一個以上不工作，要麼 - 它實際上適用於臺式機，無論什麼寬度，而不是在iPad上。真奇怪。

如何使用相同的媒體查詢定位iPad和桌面？

來源

2012-10-25 zok

現在你上面的代碼沒有顯示它，但是我假設你在這個@ media之後加上正確的括號，並且圍繞着你的css：{}？ - 在@media只有屏幕和（最大寬度：767px）{.example {寬度：100px;}} – Andy

是的，當然:) – zok

在我看來，唯一的解決方案是使用所有的代碼作爲默認的CSS取而代之的是，將所有'反對'的CSS放在媒體查詢中，使用（min-width：769px）來定位桌面。我之前沒有想過這個，因爲我一直在考慮將桌面寬屏作爲默認佈局。你們怎麼看？ – zok

您可以使用逗號在@media查詢中包含兩個不同的規則。這將避免兩個設備冗餘CSS時，規則是一樣的：

@media only screen and (device-width: 768px), 
     only screen and (max-width: 768px) { 
/* CSS */ 
}

下面的代碼是專爲iPad（縱向和橫向）：

/* iPad Landscape */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
/* CSS */ 
} 

/* iPad Portrait */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 
/* CSS */ 
}

希望這可以幫助你！如果您有任何疑問或需要澄清，請告知我們。

來源

2012-10-31 08:31:24

完美，謝謝！ – zok

我已經使用了這個。爲所有設備工作。

@media only screen and (min-width: 1024px) and (max-width: 1199px){ 

} 

@media only screen and (min-width: 768px) and (max-width: 1023px){ 

} 

@media only screen and (min-width: 480px) and (max-width: 767px){ 

} 

@media only screen and (min-width: 0px) and (max-width: 479px){ 

}

來源

2014-05-07 11:54:03 Amit

你需要在你的HTML中，這樣你的媒體查詢將適用於兩者。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

來源

2015-06-28 12:25:15 user2760338

媒體查詢爲iPad和桌面（最大寬度）

回答

相關問題