媒体查询不能在实时服务器上运行，但它可以在本地运行

Question

所以，这是我的问题。我想我已经尝试了我在类似主题上看到的所有修复，但似乎没有任何效果，我不明白为什么。这也是我第一次部署网站。也是我第一次尝试制作移动优先网站，其想法是让它看起来像一个应用程序。

https://styleplace.pt

在页面的“Sobre nos”部分，我有一个 h2 和 2 个 p，我只想在移动设备上显示一个 p，而在桌面上显示所有内容。但是在部署的页面上，它不起作用。警告：由于我一直在尝试实施所有修复，因此网站这部分的代码有点粗糙。

我在这里留下的代码比所讨论的 3 个元素要多一些，因为我不知道父元素是否与它有关（我真的没有这个想法） .

HTML

.sobreTexto {
    border-radius: 3rem 1rem 1rem 1rem;
    width: 80%;
    height: 23vh;
    background: #111;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
    box-shadow: -0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.2);
}

.sobreSoDesktopH2 {
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    display: none;
}

.sobreSempre {
    width: 63%;
    font-size: 0.8rem;
    color: white;
    font-family: "Poppins", sans-serif;
}

.sobreSoDesktop {
    width: 63%;
    font-size: 0.8rem;
    color: white;
    font-family: "Poppins", sans-serif;
    display: none;
}

.sobreEmBaixo {
    height: 33vh;
}

.sobrePic {
    width: 35vw;
    height: 35vh;
    z-index: 20;
    background: #fff;
    box-shadow: -0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.2), 0.5rem 0px 1rem 0px rgba(0, 0, 0, 0.2);
    border-radius: 4rem 1rem 2rem 1rem;
    position: absolute;
    right: 6vw;
    top: calc(11.5vh - 17.0vh);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

@media (min-width: 1025px) {

  .sobreSoDesktop {
      display: block;
  }

  .sobreSoDesktopH2 {
      display: block;
  }
}

<div class="sobre">
    <div class="caption2">
        <p>Sobre nós</p>
    </div>
    <div class="sobreEmBaixo">
        <div class="flexContainer2">
            <div class="sobreTexto">
                <h2 class="sobreSoDesktopH2">Davi Jonatas:</h2>
                <p class="sobreSempre">
                    Trabalhei em uma barbearia quando cheguei a Portugal, há 3 anos atrás e venho  buscando evoluir profissionalmente, trazer <strong>conforto</strong> e <strong>qualidade</strong> nos nossos serviços e trazer também aos nossos clientes o melhor atendimento.
                </p>
                <p class="sobreSoDesktop">Estamos sempre nos atualizando para chegar na nossa melhor versão e nossa motivação vem da satisfação dos nossos clientes e amigos.</p>
            </div>
            <div class="sobrePic">
                <img 
                srcset="
                imgs/Fotos/2juntos.jpeg 1125w,
                imgs/Fotos/2juntos_230x230.png 230w,
                imgs/Fotos/2juntos_394x400.png 394w
                "
                src="imgs/Fotos/2juntos.jpeg"
                alt="Davi e Gedeão Jonatas, barbeiros juntos">
            </div>
        </div>
    </div>
</div>

如果有人可以帮助我，那就太棒了。谢谢

Answer 1

您提供给我们的 CSS 有效。只是您的网站上实际上并没有该 CSS。

我怎么看出来的？

Inspect Element > Sources > CSS > *style.css

进入文件后，我只是在底部添加了这段代码，它就起作用了 :^)

.sobreSoDesktop{
    display:none;
}
@media (min-width: 1025px) {

  .sobreSoDesktop {
      display: block;
  }

  .sobreSoDesktopH2 {
      display: block;
  }
}

这是我能找到的与任何 @media 查询相关的所有 CSS

@media (min-width: 1025px) {
    .cardEquipa {
        width: 25vw;
    }
    .sobrePic img {
        object-position: 0rem -1rem;
    }
    .linearBackground {
        justify-content: flex-start;
    }
    .textoLocalizacao {
        padding-left: 10vw;
    }
    .mapa {
        padding-left: 40vw;
    }
    .servicinho {
        flex-direction: row;
        width: 20vw;
        height: 20vh;
    }
    .imagemServicinho {
        height: 10vh;
        width: 10vh;
        padding-left: 1rem;
    }
    .imagemServicinho img {
        width: 10vh;
        height: 10vh;
    }
    .servicinhoIgual {
        display: block;
    }
    .servicinhoPreco {
        padding-right: 1rem;
    }
    .redesSociais {
        width: 20%;
    }
}