媒體查詢 - 將特定設備定位在一起

我有一個設備樣式表被加載來處理網站中的響應式設計，但我正在努力將我想要的幾個不同的媒體查詢分組。媒體查詢 - 將特定設備定位在一起

我已經爲小型網頁窗口，任何旋轉的移動設備和只有肖像的iPad共享一組樣式。

在我得到的一切，除了在iPad與此查詢的時刻：

@media all and (max-device-width: 480px), all and (max-width: 480px)

我得到的iPad的畫像，此代碼：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)

如何合併這些兩個媒體查詢？

來源

2013-05-06 Steve de Niese

你能舉個例子嗎？或者建議爲什麼？移動/智能手機和平板電腦是不同的設備。由於不同的屏幕具有不同的屏幕分辨率，iPad也可能會出現問題以匹配。 – nickhar 2013-05-06 23:35:39

簡答：客戶要求。基本上他們希望他們的手機移動網站和整個網站看起來不錯，並在景觀，而不是肖像的iPad上運行良好，所以他們希望在縱向視圖上的移動網站版本。是不是可以將查詢與這兩個變量結合起來？目前我的臨時工作是完全重複愚蠢的風格。 – 2013-05-07 00:51:39

好的，對於有此問題的任何人。

爲了達到這個目的，我最終使用媒體查詢來加載樣式表，而不是將媒體查詢嵌入到我的樣式表中。

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" /> 
<link rel="stylesheet" type="text/css" media="@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />

來源

2013-05-09 23:16:24

媒體查詢 - 將特定設備定位在一起

回答

相關問題