Question

我正在寻找使用CSS Media Query来支持多个平板电脑（Android / iPad）。以下是我的媒体查询;

<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">

现在我的假设是大多数平板电脑都低于1024px宽度。请在这方面纠正我。任何表格比较都会很棒。

除媒体查询的设备宽度之外的任何其他方法都可以。

我正在寻找一种设计我的页面的通用方法，这种方式适用于桌面/平板电脑浏览器......现在和未来（甚至可能是移动设备）。我使用流体设计（或称为响应式设计）相同（％...宽度/高度/填充/边距全部以％表示）

Answer 1

请记住，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">

注意：您通常可以通过将媒体查询与Modernizr等功能检测库相结合来检测平板电脑。

用于多种分辨率的CSS Media Query

1 个答案: