如何更改每个 @media 屏幕的 CSS 类？答案

【问题标题】：How do I change a CSS class per @media screen?如何更改每个 @media 屏幕的 CSS 类？
【发布时间】：2020-10-12 09:55:54
【问题描述】：

我有一个简单的 div 框，其中包含我想根据用户是在台式机/平板电脑/笔记本电脑还是移动设备上查看的不同格式的文本。我正在尝试使用@media screen，但也许我做错了。这是我尝试过的：

.topbox {
position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    height: 100px; 
    padding: 20px 10px;
}

@media only screen and (max-width: 600px) {
.topbox {
    background: #9b4fe0;
    width: 300px;
        }
}
@media only screen and (max-width: 800px) {
.topbox {
    background: #ff5000;
    width: 600px;
        }
}

在我的脑海中，我有： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

【问题讨论】：

你能告诉我们你的尝试，并显示一些示例代码。
你的机顶盒是一类吗？因为如果是，请注意您在媒体查询中使用 # ，您应该将其更改为 .topbox
好的，哎呀，我修好了。
现在可以用了吗？ @mlolm
@BarLevin 的排序 - 它没有显示正确的属性，但它必须是我设置最大宽度的方式。

标签： html css responsive-design media-queries responsive

【解决方案1】：

这是你的代码：

@media only screen and (max-width: 600px) {
.topbox {
    background: #9b4fe0;
    width: 300px;
        }
}
@media only screen and (max-width: 800px) {
.topbox {
    background: #ff5000;
    width: 600px;
        }
}

使用此代码，第二个媒体查询将覆盖第一个 - 它紧随其后并且小于 800 像素的所有内容也小于 600 像素，因此 600 像素规则不会产生任何影响.要解决这个问题，只需改变他们的顺序：

@media only screen and (max-width: 800px) {
.topbox {
    background: #ff5000;
    width: 600px;
        }
}
@media only screen and (max-width: 600px) {
.topbox {
    background: #9b4fe0;
    width: 300px;
        }
}

这样第一条规则将适用于宽度在 601 到 800 像素之间的屏幕，第二条规则适用于宽度等于或小于 600 像素的屏幕。

【讨论】：

【解决方案2】：

仅基于该 CSS，您的 topbox 是一个类而不是 id，因此它应该是 .topbox 而不是 #topbox。

.topbox {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    height: 100px; 
    padding: 20px 10px;
}

@media only screen and (max-width: 600px) {
.topbox {
    background: #9b4fe0;
    width: 300px;
        }
}
@media only screen and (max-width: 800px) {
.topbox {
    background: #ff5000;
    width: 600px;
        }
}

【讨论】：

仍然认为我没有正确设置屏幕尺寸，因为它不显示移动设置与桌面设置。它仅在移动设备中显示 maxwidth 800 设置。在桌面上也没有。
@mlolm 尝试@media (min-width: 1025px) and (max-width: 1280px) 用于桌面，看看是否可行。以前对我来说也是这样。