Question

我正在构建一个响应式布局，默认情况下首先从移动设备（1列）开始，然后在横向和＆amp ;;肖像模式，最后是桌面。

我的平板电脑（1栏）断点。

@media（min-device-width：768px）和（max-device-width：1024px）和（orientation：portrait）
@media（min-device-width：768px）和（max-device-width：1024px）和（orientation：landscape）

但对于桌面，我正在使用的设计只有最大宽度976px的布局（2列）。

是否可以仅限制桌面目标（最小宽度976像素），同时防止平板电脑媒体查询捡起它们？在桌面上，如果它低于976px，它应该适应移动布局。

Answer 1

我不是这方面的专家，但我确实使用媒体查询设计了一个网站。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
最好坚持使用此处给出的查询标准，以避免在您的网站成型后稍后搞乱您的CSS。

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

这适用于您的桌面。

Answer 2

使用Modernizr（http://modernizr.com/download/）检测触控设备。 Modernizr会将.touch或.no-touch类添加到您的html标记中。因此，对于桌面，您将使用.touch类来定位桌面。

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