有没有办法制作仅限桌面的 CSS 规则？答案

【问题标题】：Is there a way to make desktop-only CSS rules?有没有办法制作仅限桌面的 CSS 规则？
【发布时间】：2011-07-22 18:50:21
【问题描述】：

我发现我的 Droid 的最大宽度为 800 像素，我认为一些分辨率较低的计算机会小于此宽度，但我希望我的 Droid 显示移动 CSS，所以我不确定最大设备宽度是最好的解决方案。那么有人知道我会如何设计我的 CSS 链接标签，以便移动 CSS 仅由智能手机使用，而桌面 CSS 仅由台式计算机使用（包括宽度低于 800 像素的那种）？

【问题讨论】：

标签： css mobile

【解决方案1】：

响应式网页设计，使用媒体查询

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

【讨论】：

有800以上的智能手机吗？
是的，iPhone 4 处于横向模式。
哦，对不起，评论不正确，CSS 只会在 css 大于 800px 时显示；是的，如果你也考虑平板电脑。一个很酷的链接是mediaqueri.es
横屏模式下的 iPad 怎么样？这仍然在这个范围内（iPad 横向为 1024 像素）。
如果你调整你的桌面导航器的大小，这个 css 将适用

【解决方案2】：

我尝试了上述解决方案，但 它们不适用于 iPad 的横向模式。 iPad 风景是 1024 像素。所以我的解决方案是：

@media only screen and (min-width: 1025px) {
        .myClass {
            /*...your desktop-only style...*/
        }
    }

【讨论】：

【解决方案3】：

@media (pointer: fine) {
    body {
        background-color: red;
    }
}

【讨论】：

【解决方案4】：

移动设备和桌面设备之间的差距越来越近 - 例如平板电脑或最近新推出的混合设备。

正如 Aaron 指出的那样，您可能希望根据设备屏幕（最小宽度或最大宽度）定义不同的规则。例如：

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

您可能想要使用的不同标准是根据设备的屏幕功能定位设备：

Touchscreen media-queries

【讨论】：