我正在构建一个响应式布局，首先默认为移动（1列），然后是横向和纵向模式下的平板电脑的断点，最后是桌面 .
对于我的平板电脑（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，它应该适应移动布局 .
2 回答
使用Modernizr（http://modernizr.com/download/）检测触摸设备 . Modernizr会将
.touch或.no-touch类添加到您的html标记中 . 因此，对于桌面，您将使用.touch类来定位桌面 .我不是这方面的专家，但我确实使用媒体查询设计了一个网站 .
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
最好坚持使用此处给出的查询标准，以避免在您的网站成型后稍后搞乱您的CSS .
这应该适用于您的桌面 .