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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6794683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:05:00  来源:igfitidea点击:

Is there a way to make desktop-only CSS rules?

cssmobile

提问by brony4lyfcuzponiesrule

I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?

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

回答by Aaron

Responsive Web Design, using media-queries

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

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

回答by Hugo Nava Kopp

I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px. So my solution was:

我尝试了上面的解决方案,但它们在横向模式下不适用于 iPad。iPad 横向为 1024 像素。所以我的解决方案是:

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

回答by Luis Evrythng

The gap between mobile and desktop devices is getting closer and closer -consider, for example, tablets or the recently new hybrid devices.

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

As Aaron points, you might want to define different rules based on device screen (min-width or max-width). Eg:

正如 Aaron 所指出的,您可能希望根据设备屏幕(最小宽度或最大宽度)定义不同的规则。例如:

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

A different criteria you might want to use is targeting devices based on the their screen capabilities:

您可能想要使用的另一个标准是根据设备的屏幕功能定位设备: