媒體查詢不適用於實時服務器，但它適用於本地

Question

所以，這是我的問題。 我想我已經嘗試了我在類似主題上看到的所有修復程序，但似乎沒有任何效果，我不明白為什么。 這也是我第一次部署網站。 也是我第一次嘗試制作移動優先網站，目的是讓它看起來像一個應用程序。

https://styleplace.pt

在頁面的“Sobre nós”部分，我有一個 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%;
    }
}