Question

我做了一个媒体查询，奇怪的是，一些新的css属性起作用，而另一些则没有......

工作：.ctas和.footer-content

当我使用chrome检查器时，我甚至没有检测到无法工作的类的媒体查询...

您可以在此处查看我正在处理的页面：http://sopureinthecity.fr/test/

@media screen and (max-width:570px) {

    .ctas {
        width: 270px;
    }

    .footer-content {
        padding-top: 20px;  
    }

    .img-reponsive {
  margin-top: 40px;   
    }


    .main-title {
        top: 30%;
        width: 100%;
        font-size: 18px;
    }


    .modal-btn {
        top: 48%;  
    }

}

我做错了什么？

提前致谢！

编辑，所以一切都在浏览器中运行，但是当我在手机上访问网站时，我的.large-header都被窃听了！

.large-header的响应仅适用于桌面（具有手机屏幕大小）

Answer 1

与您链接的网站相比，您的css选择器中存在拼写错误：

.img-reponsive vs .img-responsive

.modal-btn vs .modalbtn

Answer 2

媒体查询没有错。这个问题是一个错字：

.modal-btn {

应该是

.modalbtn {

由于您网页中使用的CSS类是modalbtn。

在我的媒体查询中：某些css属性有效，其他不是

2 个答案: