Question

我有一个wordpress网站，我已经添加了一些emdia查询来处理网站的移动版本。我使用Firefox浏览网站。 Firefox为开发人员提供了一项功能，您可以在其中更改浏览器的大小（遗憾的是，我不知道它的英文名称是什么），而且我一直在使用该功能查看我的媒体查询方式影响网站。

这是我的代码：

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

.footer-contact {
    background-color: red;
}

.container {
    padding-left: 5px;
    padding-right: 5px;
}
footer {
    margin-top: 150px;
}
#hem-kontakt {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
#hem-nummer {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
}
#hem-kontor {
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}
#footer-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.footer-contact {
    padding: 0 !important;
}
.post-container #displayTable {
    left: 0;
    display: block;
    width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -230px;
}

}

如果我在调整大小的浏览器窗口中查看网站，一切看起来都很好。但是，当我在手机上查看网站时，似乎忽略了我的媒体查询中的一些CSS。

这是我到目前为止所做的：

我已将媒体查询放在css文件的底部

我查看了header.php文件中的元标记，它们看起来像这样：



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

我已在手机浏览器中清空缓存
我尝试了三种不同的手机（虽然都是机器人）
我在查询中添加了 background-color：red; 以查看是否有反应。我只是在浏览器中得到了反应。

重要

这段代码是最重要的：

.footer-contact {
    padding: 0 !important;
}
.post-container #displayTable {
    left: 0;
    display: block;
    width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -230px;
}

在.post-container #displayTable中，手机识别left：0和margin-bottom：-230px，但它忽略了margin-left和margin-right。

在.footer-contact中，它忽略了填充：0;

我知道移动设备放置在最大宽度：515px，因为它将＃footer-container显示为flex（此代码）

#footer-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

媒体查询处理调整大小的桌面浏览器窗口，但不适用于移动设备

0 个答案: