媒体查询不起作用，每页有限制吗？

Posted 2023-03-06

【中文标题】媒体查询不起作用，每页有限制吗？

【英文标题】：media query is not working, is there a limit per page?

【发布时间】：2021-06-24 15:10:03

【问题描述】：

当我响应我的网站时， 一些媒体查询有效，但最后一个无效。

/* work */
@media screen and (max-width: 1030px)

    .section2 .content-card .title-card img 
        max-width: 200px;
    

    .section1 
        height: 1000px;
    


/* doesn't work */

@media screen and (max-width: 1030px)
    .section2 
        padding-top: 15vh;
    


@media screen and (max-width: 260px)
    .section2 
        padding-top: 6vh;
    

    .section1 
        padding-top: 3vh;
    

在我的代码中有更多媒体查询，但由于问题的代码限制，我不得不删除它们。

每个文件的媒体查询数量是否有限制？

【问题讨论】：

嗯，MQs 没有任何限制。可以加个 html 让我看看吗？

好的，但是当我问这个问题时，他告诉我代码太多，信息太少，所以如果它不起作用，我会给你一个链接

创建一个 Codepen 或小提琴

我不知道怎么做这里是谷歌驱动链接

html 文件：drive.google.com/file/d/1DeitanjoYtm0iV91NnbYCfh0pE_6Vv5G/…

【参考方案1】：

见附图。这表明它正在工作。

【参考方案2】：

事实上，为了做响应式，我使用响应式模式和 devtools 这就是为什么它不工作screen shoot

【讨论】：

好吧，我将继续我的研究。感谢您尝试再见

我找到了解决方案，我必须使用标签 来激活媒体查询