文章/答案/技术大牛

发布

社区首页 >问答首页 >媒体查询CSS覆盖CSS，但不满足宽度条件

问媒体查询CSS覆盖CSS，但不满足宽度条件
EN

Stack Overflow用户

提问于 2021-10-19 17:47:24

回答 3查看 64关注 0票数 1

我有这个css：

.realiser-devis { text-transform:大写；font-size: 23px；font-weight: 700；边距: 0；color：#fff；}

如果屏幕宽度小于1600px，我想减小字体大小

@media only screen and  (max-width:1600px) {
        .realiser-devis {
            font-size: 12px;
        }
        
    }

问题是媒体查询中的css在不满足条件的情况下工作；我的屏幕宽度是1800px，字体大小是12px

我是不是漏掉了什么？

问候

阿米尔

html

css

frontend

javascript

回答 3

Stack Overflow用户

发布于 2021-10-19 17:56:57

您可能在<head>部分中缺少响应性元标记。

确保在<head>部分中有以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

请阅读有关该here的更多信息。

票数 3

Stack Overflow用户

发布于 2021-10-20 08:20:42

检查时，请在控制台中使用此命令检查屏幕宽度

console.log(window.screen.width)

如果仍然是1800，请将您的媒体查询max-width减少到500并检查，如果它工作，那么您应该检查您的屏幕宽度有什么问题。

否则，请尝试使用不带关键字only的媒体查询(这可能会影响较旧的浏览器)：

@media screen and  (max-width:1600px) {
    .realiser-devis {
        font-size: 12px;
    }
}

票数 0

Stack Overflow用户

发布于 2021-10-25 21:59:36

<meta name="viewport" content="width=device-width, initial-scale=1">

有用信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69635517

复制

相似问题

问媒体查询CSS覆盖CSS，但不满足宽度条件
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询CSS覆盖CSS，但不满足宽度条件EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询CSS覆盖CSS，但不满足宽度条件
EN