CSS媒體查詢多個分辨率

我正在尋找使用CSS媒體查詢來支持多個平板電腦（Android/iPad）。以下是我擁有的媒體查詢;CSS媒體查詢多個分辨率

<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css"> 
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">

現在我的假設是大多數平板電腦都低於1024像素寬度。請在這方面糾正我。任何表格比較都會很棒。

除了設備寬度以外，其他任何方法都可以用於媒體查詢。

我正在尋找一種設計我的網頁的通用方式，這種方式適用於桌面/平板電腦瀏覽器......現在和將來（甚至可能是移動的）。我使用相同的流體設計（或稱爲響應式設計）（所有的％...寬度/高度/填充/邊距均以％爲單位）

來源

2011-11-11 testndtv

您是試圖以分辨率還是基於平板電腦還是桌面設備爲基礎？如果您只想定位平板電腦，我不會使用分辨率。隨着決議越來越大，這一定會在6個月內破裂。已經有分辨率高於1024像素的平板電腦。請參閱http://en.wikipedia.org/wiki/Comparison_of_tablet_computers。 –

請記住，可以使用iPad等設備縱向和橫向的方向，所以我會使用以下媒體查詢：

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

    /* .touch class from Modernizr */ 
    .touch .element {color: #fff;} 

}

或者，如果你想保持風格自己的文件中：

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">

注：你c通常應通過將媒體查詢與特徵檢測庫（如Modernizr）結合來檢測平板電腦。

來源

2011-11-11 09:47:14

我知道如何只針對iPad ...我正在尋找一種通用的方式來爲多個平板電腦編寫媒體查詢。 – testndtv

這很難;一個星系標籤是1280x800，你也可以在'netbooks'上找到它。不幸的是，如果您嘗試根據設備類別設置不同的行爲，那麼您最好的選擇可能是用戶代理嗅探。 – Nevir

我更新了提及檢測觸摸事件支持的答案。 –

CSS媒體查詢多個分辨率

回答

相關問題