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

Question

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

Answer 1

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

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

Answer 2

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

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

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

您可能希望使用的其他标准是根据设备的屏幕功能定位设备：

• Touchscreen media-queries

Answer 3

我尝试了上述解决方案，但是它们在横向模式下无法用于iPad 。 iPad Landscape为1024 px。 所以我的解决方案是：

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

Answer 4

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

Answer 5

将CSS放在一个PHP页面中，该页面从环境变量中检测浏览器/设备，并提供正确版本的CSS。