媒体查询 css 只工作几秒钟

时间：2021-06-26 11:39:55

标签： html css media-queries

我正在尝试使用媒体查询来使图像和文本适应手机壳。 这是我尝试过的，它运行正常，但不再是：

HTML：

<section class="section">
            <p id="title">Missão</p>
            <div class="flex-container">
                <div id="missao" class="col-3"><img src="js/missao.jpg"></div>
                <div class="col-9" id="textoMissao">
                    <h3>Simplificar a vida nas organizações, aumentado
                    a criação de valor, é a nossa grande missão.</h3>
                    <p>Desafiar o desconhecido. Explorar possibilidades. Transpor barreiras.
                        Inovar. São estas as motivações que desde 1993 nos conduzem na busca
                        de soluções de gestão inovadoras que simplificam a vida nas organizações.</p>
                    <p>A paixão pela inovação na gestão empresarial está no ADN da PRIMAVERA. Um
                        entusiasmo contagiante que colocamos ao serviço das organizações, 
                        disponibilizando-lhes um leque crescente de soluções de gestão que agilizam as 
                        operações e aumenta a rentabilidade do negócio.
                    </p>
                    <p>Acreditamos na força das ideias. Auxiliamos a sua concretização. Impulsionamos
                        os resultados. Defendemos que com a tecnologia certa, crescer é o caminho. Do 
                        mais pequeno micronegócio a uma grande multinacional, disponibilizamos soluções
                        ajustadas, ágeis e funcionais que dão mais força ao negócio.
                    </p>
                    <a href="false" id="brochura">» Conheça a nossa brochura institucional</a>
                </div>
            </div>
            <br><br><p class="separador"></p>
        </section>

CSS：

@media only screen and (max-width: 768px){

    #missao{
        display:block;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        
    }
    .flex-container{
        flex-direction: column;
        padding-left: 0px;
        padding-right: 0px;
    }
    #textoMissao{
        padding-left: 0px;
        justify-content: space-around;
    }
}

完整的CSS：

body{
    font-family: 'Roboto';
}

.topBar {
    height: 80px;
    background-color: #f5f5f5;
}

img{
    padding-top: 20px;;
    
}

.logo{
    float:left;
    padding-left:45px;
}

.login{
    position:relative;
    float:right;
    color:#1da2dc;
    padding-top: 30px;
    padding-right: 40px;
}

.lupa{
    position:absolute;
    top:18px;
    right: 110px;
}

.lupa:hover{
    position:absolute;
    top:20px;
}

.login:hover{
    color:#a4a3a3;
}

.pesquisa{
    position: absolute;
    top:30px;
    right:150px;
    background: transparent;
    border:none;
    width:0px;
    height: 30px;
    transition: all 0.5s;
}

.pesquisaClick{
    width:300px;
    background-color: white;
    outline:none;
    border:1px solid #aaa;
}

.banner{
    position:relative;
    height:500px;
    background-image: url("/js/fundoBanner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 0%;
    background-size: 98% 88%;
}

.pc{
    float: right;
    position:absolute;
    right: 40px;
    bottom: 40px;
    height: 380px;
}

.p1{
    position:absolute;
    left:60px;
    top:40px;
    margin-top: 0px;
    font-size: 48px;
    font-weight: bold;
    color:white;
}

.p2{
    position:absolute;
    top:90px;
    left:60px;
    font-size: 30px;
    color:#ccc;
}

.p3{
    position: absolute;
    top:150px;
    left:60px;
    font-size:20px;
    font-style: italic;
    color: white;

}

.saberMais{
    position: absolute;
    top: 250px;
    left:60px;
    padding: 8px 20px;
    color:white;
    text-decoration: none;
    font-weight: bold;
    background-color: #f16248;
    border-radius: 20px;
}

.saberMais:hover{
    background-color: #c8c8c8;
    color: #252525;
}

.flex-container{
    display:flex;
    padding-left: 100px;
    padding-right: 100px;
    align-items: flex-start;
    justify-content: space-around 10px;
}

.flex-container > div > p{
    color:#7d7d7d;
}
h3{
    color: #252525;
}

#title{
    font-size: 250%;
    color: #3c368c;
    text-align: center;
}

section{
    margin-left: 150px;
    margin-right: 150px;
}
.separador{
    border: 1px solid #7d7d7d;
}


#brochura{
    font-size: 120%;
    color: #0075be;
    text-decoration: none;
    font-weight: bold;
}

#textoMissao{
    padding-left: 50px;
}
#brochura:hover{
    text-decoration: underline;
}

.people{
    margin:40px;
    padding:40px;
}

.flex-container2{
    display:flex;
    justify-content: center;
}

.flex-container2 > div{
    margin-right:15px;
    margin-left: 15px;
}

.flex-container2 > div > img{
    border-radius: 50%;
    position: relative;
    padding: 0px;
}


.flex-container2 > div > img:hover{
    border-radius: 0%;
}

.titulo{
    font-size: 42px;
    font-weight: bold;
}

.subtitulo{
    font-size: 35px;
    font-weight: bold;
}

.texto{
    font-size: 26px;
}

#t0{
    color:#f27d29;
}

#t1{
    color:#153c85;
}

#t2{
    color:#ebc711;
}

#t3{
    color:#153c85;
}

#t4{
    color:#ff701e;
}

#s0, #txt0{
    color:#153c85;
}

@media only screen and (max-width: 768px){

    #missao{
        display:block;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        
    }
    .flex-container{
        flex-direction: column;
        padding-left: 0px;
        padding-right: 0px;
    }
    #textoMissao{
        padding-left: 0px;
        justify-content: space-around;
    }
}



.carousel-caption{
    top:60%;
    transform: translateY(-50%);
    bottom:initial;

}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}
   
.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
   

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
    opacity: 0;
}
   
.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

footer{
    margin-top: 50px;
    padding-top: 30px;
    background-color: #ebebeb;
}

.flex-container3{
    display:flex;
    text-align: center;
    justify-content: space-around;
}

当我刷新页面时，此配置会保留 1/2 秒（照片 1），但此后此配置消失（照片 2）。

Photo1 Photo2

知道它是什么吗？

1 个答案:

答案 0 :(得分：0)

将当前查询之外的 #missao、.flex-container 或 #textoMissao 上的所有修改移到另一个查询中以获得更大的屏幕尺寸，这样它们就不会覆盖它们。< /p> 

@media only screen and (min-width: 769px){
  #textoMissao{
     padding-left: 50px;
  }
  .flex-container{
     display:flex;
     padding-left: 100px;
     padding-right: 100px;
     align-items: flex-start;
     justify-content: space-around 10px;
  }
}

完整的 CSS：

body{
    font-family: 'Roboto';
}

.topBar {
    height: 80px;
    background-color: #f5f5f5;
}

img{
    padding-top: 20px;;
    
}

.logo{
    float:left;
    padding-left:45px;
}

.login{
    position:relative;
    float:right;
    color:#1da2dc;
    padding-top: 30px;
    padding-right: 40px;
}

.lupa{
    position:absolute;
    top:18px;
    right: 110px;
}

.lupa:hover{
    position:absolute;
    top:20px;
}

.login:hover{
    color:#a4a3a3;
}

.pesquisa{
    position: absolute;
    top:30px;
    right:150px;
    background: transparent;
    border:none;
    width:0px;
    height: 30px;
    transition: all 0.5s;
}

.pesquisaClick{
    width:300px;
    background-color: white;
    outline:none;
    border:1px solid #aaa;
}

.banner{
    position:relative;
    height:500px;
    background-image: url("/js/fundoBanner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 0%;
    background-size: 98% 88%;
}

.pc{
    float: right;
    position:absolute;
    right: 40px;
    bottom: 40px;
    height: 380px;
}

.p1{
    position:absolute;
    left:60px;
    top:40px;
    margin-top: 0px;
    font-size: 48px;
    font-weight: bold;
    color:white;
}

.p2{
    position:absolute;
    top:90px;
    left:60px;
    font-size: 30px;
    color:#ccc;
}

.p3{
    position: absolute;
    top:150px;
    left:60px;
    font-size:20px;
    font-style: italic;
    color: white;

}

.saberMais{
    position: absolute;
    top: 250px;
    left:60px;
    padding: 8px 20px;
    color:white;
    text-decoration: none;
    font-weight: bold;
    background-color: #f16248;
    border-radius: 20px;
}

.saberMais:hover{
    background-color: #c8c8c8;
    color: #252525;
}

.flex-container > div > p{
    color:#7d7d7d;
}
h3{
    color: #252525;
}

#title{
    font-size: 250%;
    color: #3c368c;
    text-align: center;
}

section{
    margin-left: 150px;
    margin-right: 150px;
}
.separador{
    border: 1px solid #7d7d7d;
}


#brochura{
    font-size: 120%;
    color: #0075be;
    text-decoration: none;
    font-weight: bold;
}

#brochura:hover{
    text-decoration: underline;
}

.people{
    margin:40px;
    padding:40px;
}

.flex-container2{
    display:flex;
    justify-content: center;
}

.flex-container2 > div{
    margin-right:15px;
    margin-left: 15px;
}

.flex-container2 > div > img{
    border-radius: 50%;
    position: relative;
    padding: 0px;
}


.flex-container2 > div > img:hover{
    border-radius: 0%;
}

.titulo{
    font-size: 42px;
    font-weight: bold;
}

.subtitulo{
    font-size: 35px;
    font-weight: bold;
}

.texto{
    font-size: 26px;
}

#t0{
    color:#f27d29;
}

#t1{
    color:#153c85;
}

#t2{
    color:#ebc711;
}

#t3{
    color:#153c85;
}

#t4{
    color:#ff701e;
}

#s0, #txt0{
    color:#153c85;
}

@media only screen and (min-width: 769px){
  #textoMissao{
     padding-left: 50px;
  }
  .flex-container{
     display:flex;
     padding-left: 100px;
     padding-right: 100px;
     align-items: flex-start;
     justify-content: space-around 10px;
  }
}

@media only screen and (max-width: 768px){

    #missao{
        display:block;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        
    }
    .flex-container{
        flex-direction: column;
        padding-left: 0px;
        padding-right: 0px;
    }
    #textoMissao{
        padding-left: 0px;
        justify-content: space-around;
    }
}



.carousel-caption{
    top:60%;
    transform: translateY(-50%);
    bottom:initial;

}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}
   
.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
   

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
    opacity: 0;
}
   
.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

footer{
    margin-top: 50px;
    padding-top: 30px;
    background-color: #ebebeb;
}

.flex-container3{
    display:flex;
    text-align: center;
    justify-content: space-around;
}
相关问题
最新问题