CSS-@media屏幕和最大宽度：--- px在Firefox上不起作用

问题描述

我是CSS的新手，我的方法非常有经验（几句话充满错误，我花了很多时间才能得出结果）。 在移动屏幕（屏幕宽度小于500像素）上查看徽标时，我想替换网站标题中的徽标。所以我写了下面的CSS

@media only screen and (max-width: 500px) {.logo img{ content:url("....."); }}

在chrome上可以正常工作，但在Firefox上不能正常工作。

有人可以帮我吗？

解决方法

content属性与::before和::after一起使用。

检查以下stackoverflow问题以获取详细信息：Content url does not display image on firefox browser

,

首先请确保您的网站中包含此元数据：

<meta name="viewport" content="initial-scale=1.0" />

第二，尝试使用此

@media(max-width:500px){
/*Here your code*/
;}

,

好的，我已经设法以其他方式解决了这个问题。 我没有使用content命令将徽标替换为其他徽标（这显然在firefox中带来了问题），而是保留了相同的徽标，并使用max-width命令使用vw设置了最大宽度，如下所示：一个单元。

这就是最后的样子。

@media only screen and (max-width: 500px) {
.logo img{
max-width: 70vw;}
}

在chrome和firefox上都可以正常工作。