针对移动端（首先是手机）、平板电脑和台式电脑的特定媒体查询。

Question

我正在构建一个响应式布局，首先默认为移动端（1列），然后在平板电脑的横向和纵向模式下设置断点，最后是桌面端。

对于我的平板电脑（1列）断点，我有以下代码：

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

@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)

但是对于桌面端，我正在使用的设计仅具有最大宽度为976像素的2列布局。

是否有可能只针对桌面端（最小宽度976像素）进行定位，同时防止平板电脑媒体查询拾取它们？并且在桌面端如果宽度小于976像素，则应自适应移动端布局。

- calebo

---

特定设备尺寸的问题在于它们可能会发生变化。最好使用自然断点，就像我在回答类似问题时所解释的那样。自然断点 - Dave Everitt

可能是 媒体查询：如何针对桌面、平板电脑和移动设备进行定位？ 的重复问题。 - Mogsdad

Answer 1

使用 Modernizr (http://modernizr.com/download/) 来检测触摸设备。Modernizr 会在你的 html 标签中添加 .touch 或 .no-touch 类别。因此，在桌面上，您将使用 .touch 类别来针对桌面。

@media only screen and (min-width: 960px) {
    .touch .container { width: 960px; }
}

- polikin

Answer 2

我不是专家，但我曾使用媒体查询设计过一个网站。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
为了避免在网站成型后弄乱你的CSS，请最好遵循此处给出的查询标准。

@media only screen (min-device-width: 1024px)

这应该对你的桌面电脑正常工作。

- A_AR