Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] MENU LATERAL

Boa noite, como boa prática o @media deve se repetir toda vez que mudar o tipo de tela ou devo utilizá-lo somente uma vez colocando toda estilização dentro do mesmo?

no meu caso eu utilizei dois, entretanto seria correto? Desde já agradeço

@media(min-width:834px) {

    /*CABEÇALHO*/
    .cabecalho__pesquisar__item {
        display: block;
    }

    .rodape__container {
        justify-content: space-between;
    }

/* MENU LATERAL PARA TELAS DE TABLETS */

@media (min-width: 834px) {

.menu__container {
    left: 0;
    height: auto;
    width: 74px;
    top: 80px;
}

.menu__lista {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 15px;
    gap: 33px;
}
2 respostas
solução!

Olá Juliano, tudo bem?

Respondendo à sua pergunta, é uma boa prática utilizar o @media toda vez que mudar o tipo de tela. Dessa forma, você consegue garantir que o seu layout fique responsivo em diferentes dispositivos.

No seu caso, você utilizou o @media duas vezes, mas ambas com a mesma condição (min-width: 834px). Nesse caso, seria melhor colocar todas as estilizações dentro do mesmo @media, assim você evita repetições desnecessárias. Você colocaria outro se fosse diferente a largura da tela.

Segue um exemplo de como você poderia fazer:

@media(min-width:834px) {
    /*CABEÇALHO*/
    .cabecalho__pesquisar__item {
        display: block;
    }

    .rodape__container {
        justify-content: space-between;
    }

    /* MENU LATERAL PARA TELAS DE TABLETS */
    .menu__container {
        left: 0;
        height: auto;
        width: 74px;
        top: 80px;
    }

    .menu__lista {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 15px;
        gap: 33px;
    }
}

Espero ter ajudado e bons estudos!

Obrigado Renan