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

[Dúvida] Achei difícil!

Não consegui identificar o que a questão estava pedindo... Tentei responder de forma aberta, mas não aceitou nenhuma das respostas que coloquei. Pedi ajuda a Luri e ela me informou que para uma página com mínimo de 300px e máximo de 700px, poderia ser assim:

@media (min-width: 300px) and (max-width: 700px)

A Luri analisou a resposta e não considerou correta (só parcialmente). Em outro tópico, um dos instrutores disse que a resposta é:

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

}

Já tinha colocado @media (max-width: 700px) na resposta e ela não aceitou também. rsrsrsrs Não entendi o uso do Screen. O que significa? Desde já, agradeço a ajuda. :)

5 respostas

Eu gosto de trabalhar assim:

@media (max-width: 700px) {
    Todas as regras aqui dentro serão aplicadas à telas com no máximo 700px de viewport. Ou seja, de zero à 700.
    O que eu colocaria aqui? Regras de CSS exclusivas para interface mobile.
    max-width = no máximo o tamanho definido.
}

@media (min-width: 700px) {
    Todas as regras aqui dentro serão aplicadas à telas maiores que 700px de viewport. Ou seja, de 700 à infinito...
    O que eu colocaria aqui? Regras de CSS exclusivas para interface desktop.
    min-width = no mínimo o tamanho definido.
}

@media (min-width: 300px) and (max-width: 700px) {
    Todas as regras aqui dentro serão aplicadas à telas com a viewport entre 300px à que 700px de viewport.
    Você pode fazer assim ou pode utilizar o meu primeiro exemplo para interfaces mobile.
    A grande maioria dos devices hoje em dia tem mais de 300px e menos de 700px, ou seja, deduzir a regra para aplicar à todos com menos de 700px é mais interessante no meu ponto de vista, porque pode atender os dispositivos com telas muito estreitas, como os Galaxy's Fold.
    min-width and max-width = no minimo o tamanho X e no maximo o tamanho Y.
}

@media (min-width: 1920px) {
    As vezes também gosto de fazer otimizações para monitores bem grandes, os famosos ultrawides - maiores que full hd, ai utilizo essa regra aqui :) 
}

Oi, Murillo, tudo bem? Eu respondi desta forma, primeiro usando o max-width, depois colocando a opção com min AND max, mas a Luri não aceitou nenhuma das respostas. Fiquei sem entender... Gosto de responder as perguntas quando são abertas, pra escrever mesmo, pois acho que avaliam melhor o aprendizado do que quando são objetivas, de marcar. Enfim... Obrigada pela ajuda!

solução!

Olá... voce está correta Janaina... A sua resposta está correta. Após algumas tentativas com variações dessa sua mesma resposta, é liberado um botão para tornar a pergunta múltipla escolha e adivinha qual a resposta correta?

max-width: 700px

Pois é, a IA queria que a resposta fosse exatamente essa e qualquer coisa diferente disso, mesmo sendo uma resposta mais completa. Não seria aceita.

Também tive dificuldades nessa resposta. Nessa a Luri falhou muito ou o enunciado foi mal feito. Tínhamos as respostas corretas, porém, nenhuma aceita.

na verdade isso é um bug recorrente em algumas tarefas de reposta, o mesmo aconteceu comigo em outra trilha do curso, a resposta estava correta e não aceitava ela, ai quando ia pra multiplas escolhas a mesma resposta era aceita