4

我正在构建一个响应式布局，默认情况下首先从移动设备（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)

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

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

4

2 回答 2

3

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

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
最好坚持这里给出的查询标准，以免以后网站成型时弄乱你的css。

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

这应该适用于您的桌面。

于 2013-01-31T06:49:39.760 回答
3

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

@media only screen and (min-width: 960px) {
    .touch .container { width: 960px; }
}
于 2013-04-16T16:59:56.660 回答