Question

我开发了自己的网站并应用了以下CSS：

.entry-content li,p {
font-size: 17pt;
font-family : Times new roman;
}

@media screen and (max-width: 480px) {
.entry-content li,p {
font-size: 14pt;
font-family : Times new roman;
}
.et_pb_post h2 {
    font-size: 20px;
    padding-bottom: 15px;
}
}

上面提到的CSS在谷歌浏览器上工作。但是当我使用mozilla firefox查看网站时，@media screen and (max-width: 480px) {无效。

如何解决这个问题？如何用各种浏览器解决这个问题，如safari，opera，thunderbird等？

谢谢！

解决了，这是我目前的cSS。在Google Chrome和Mozilla Firefox上测试过。（我仍然需要在各种浏览器上进行测试）：

@media screen and (max-width: 480px) {
.entry-content li,p {
    font-size: 14pt;
    font-family : "Times new roman";
}
.et_pb_post h2 {
    font-size: 20px;
    padding-bottom: 15px;
}
}

Answer 1

显然你的问题是带有空格的font-family周围缺少引号。

因此font-family : Times new roman;必须更改为font-family : "Times new roman";。好像Firefox更喜欢它。这是正常的，因为它是正确的css

CSS：响应式CSS不能在不同的浏览器上工作

1 个答案: