时间戳

首页 > 解决方案 > 如何更改每个 @media 屏幕的 CSS 类？

html - 如何更改每个 @media 屏幕的 CSS 类？

问题描述

我有一个简单的 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">

标签： htmlcssresponsive-designmedia-queriesresponsive

解决方案

这是您拥有的代码：

@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 像素的屏幕。

推荐阅读