2

我正在使用标准媒体查询来定位像素中的各种断点（例如@media screen and (min-width:768px) and (max-width:1024px)），但有人问我在 1024px 的桌面上显示了不同的布局和一个不同的平板电脑在相同的 1024 像素宽度。

这甚至可能吗？据我所知，它不是，但我想我会在这里得到建议以确保。

谢谢 ：）

4

2 回答 2

3

你不能在纯媒体查询 CSS中做你想做的事。基本上，您可以定位平板电脑，而不仅仅是屏幕尺寸：

触控支持

CSS4 为媒体查询提供了一个新的触摸选项。由于这没有得到广泛支持，但您可以使用 Modernizr。它将向“touch”或“no-touch”的根 html 添加一个类。然后，您可以使用它来定位触摸设备。例子：

html.touch .someToolbar {display: none;}  //hides toolbar on touch devices

用户代理

使用 javascript 检测用户代理并加载适当的 css，或者如果它们很小，则只进行样式更改

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}

解析度

如果要针对特定​​的屏幕尺寸。例如，我希望任何人在 11 英寸或更小的屏幕上运行 1024

@media 
    only screen and (oriantation: landscape) and (device-width: 1024px) and ( min-resolution: 116dpi),
    only screen and (oriantation: portrait) and (device-height: 1024px) and ( min-resolution: 116dpi), {
   //targets specifically 1024 width with screen size 10 inch or smaller
}

注意 - 我没有使用解决方法，需要测试。

于 2013-09-10T16:29:55.497 回答
-2

回答你的问题：是的，这是可能的。签出 Bootstrap 3。模型、平板电脑和桌面媒体查询已经融入其中。除非您愿意，否则无需任何自定义。

于 2013-09-10T14:57:01.847 回答