Question

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

在页面的“ Sobrenó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%;
    }
}

Media Query在实时服务器上不起作用，但在本地服务器上起作用

1 个答案: