Entrar Ainda não tem acesso?
3
respostas

Problema ao aplicar as medias queries

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Media Queries e atividade Media Queries

por Alexander Bassani Amaral
| 169.3k xp | 96 posts
Eng. de Computação

eu apliquei as Media Queries no layout do exercício,

@media (min-width: 1000px)
html {
    font-size: 1.25em;
}
@media (min-width: 600px)
html {
    font-size: 1.125em;
}

só que o site está respondendo de uma forma diferente do que deveria, quando eu deixo o site abaixo dos 600px ele continua aplicando a Media Queries 600 px.

Imagem do erro min-width

E quando eu tentei trocar o min-width para o max-width

@media (max-width: 1000px)
html {
    font-size: 1.25em;
}
@media (max-width: 600px)
html {
    font-size: 1.125em;
}

aconteceu algo semelhante, só que, enquanto eu estou abaixo do 1000 px ou 600px ele só aplica a Media Queries dos 1000px. acima dos 1000px ele deixa de aplicar as Medias Queries

Imagem do erro max-width

3 respostas
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Fala Alexander,

Aparentemente está OK, a única coisa que eu vejo que pode dar problema é o englobamento das medias queries:

@media (min-width: 900px) {
    html {
        font-size: 1.25em;
    }
}
@media (min-width: 600px) {
    html {
        font-size: 1.125em;
    }
}
por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web 
html{
    font-size: 7px;
    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {font-size: 8px;}
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {font-size: 9px;}
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {font-size: 10px;}
}

olha esse exemplo, é o que uso no dia a dia para criar um padrão nos sites, vc só precisa alterar os valores de de PX para EM e ajustar a resolução da midia conforme desejar

por Victor R. de Morais
| 108.4k xp | 5 posts

Acredito que faltou você englobar todo o seu código usando as chaves { }, por exemplo:

@media (max-width: 1000px) {
    html {
        font-size: 1.25em;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 1.125em;
    }
}

Espero ter ajudado. Abraços.