Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Por que o emulador do inspecionar e não já diretamente as medias queries?

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Faça como eu fiz: reutilizando código

por Joao Victor Batista Damasceno
| 333.2k xp | 203 posts

Olá!

Eu tenho tido um pouco de dificuldade com as adaptações das estilizações via CSS junto à instrutora. Ela está usando o emulador do Inspecionar para ir trabalhando com os elementos para simular um layout mobile. Mas queria entender porque não ir já ajustando e utilizando as medias queries. Eu não sei os outros alunos, mas eu tenho feito igual à instrutora no código e nem sempre o meu fica igual o dela, mesmo usando o mesmo tamanho que ela no emulador e mesmo montando o código igual ela conforme ela vai fazendo.

Acredito que as medias queries possuem um controle melhor sobre essa responsividade.

Eu tenho mexido e me esforçado pra deixar o mais parecido possível com o dela mas tem sido dificil mexer usando apenas o emulador. E nem sempre consigo deixar semelhante o dela que é feito com base no modelo do Figma.

Alguém poderia me responder sobre isso?

Acredito que se ela já estivesse usando as medias queries, o controle sobre os tamanhos de telas seria melhor e estilizar também...

No aguardo,

Jhonny

3 respostas
por Renan Lima
| 4021.7k xp | 8543 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, João. Tudo bem?

Sua dúvida faz sentido, mas no método mobile-first que é a abordagem desse curso, o ideal é começar a estilização direto para dispositivos móveis, sem precisar de media queries inicialmente. Isso significa que o CSS base já deve ser pensado para telas pequenas, e só depois utilizamos media queries para ajustar para telas maiores. Isso é muito útil em sites que são mais utilizados no celular.

A instrutora está certa em usar o emulador para testar o layout em dispositivos móveis antes de adicionar media queries. No mobile-first, o fluxo é mais ou menos assim:

  1. Criamos o estilo padrão (que já se aplica ao mobile).
  2. Testamos e ajustamos no emulador.
  3. Adicionamos media queries apenas para telas maiores.

Se seu layout não está igual ao da instrutora, pode ser que o zoom do navegador ou as configurações do emulador estejam diferentes. Tente verificar isso, pois o emulador às vezes pode não refletir com 100% de precisão um dispositivo real, você pode fazer pequenos ajustes no seu projeto para aproximar mais, como tamanho de margin.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Joao Victor Batista Damasceno
| 333.2k xp | 203 posts

Olá Renan! Obrigado pelo retorno.

Entendi. Você sabe me dizer se problemas de identação podem afetar o layout? Digo isso, porque em vias de teste, copiei o repositório da Mônica e o dela funcionou conforme o dela mesmo na aula. Diferente do meu que estava escrevendo junto às aulas. Talvez eu tenha feito alguma identação que acabou desajustando. Não sei se isso pode afetar sim o layout e posicionamentos dos elementos...

por Renan Lima
| 4021.7k xp | 8543 posts
Alura Scuba Team Apoio Educacional - Alura

Oi, João!

Sobre sua última dúvida, problemas de indentação no CSS não afetam diretamente o layout, pois o navegador ignora espaços extras e quebras de linha. No entanto, se a identação errada estiver causando erros de sintaxe, como chaves {} mal fechadas ou seletores quebrados, isso pode impedir que algumas regras sejam aplicadas corretamente. Verifica se não tem algum erro em vermelho, e se as tags no HTML estão corretas com os fechamentos corretos.

Fico à disposição. Abraços e bons estudos!