1

Fala galera!

Eu fiz um site para meu portfólio e justamente nele eu tive o seguinte problema:

O site é feito em uma página só, então eu tive que ajustar o tamanhos das sections para o media querries.

Eu fiz tudo usando o "Responsive Layouts" do WebDev Tools do Google Chrome.

Para os celulares em posição retrato, eu mantive 100vh como a altura de cada section, mas para os celulares em posição landscape, eu tive que aumentar para 120vh ou 140vh, já que a altura do viewport fica muito pequena para suportar o conteúdo.

O problema é, o width do celular deitado colide com o width de alguns celulares de pé. Isto está fazendo com que, para certos aparelhos, eu tenha uma sobra enorme.

Eu tenho CERTEZA que eu to fazendo meleca com os breakpoints. Eu sou um dev novo e essa é uma parte que me quebra muito!

Alguém sabe me dar uns conselhos de como arrumar isso e de boas práticas pros breakpoints dos media querries não colidirem?

Código inteiro: https://github.com/lucasemg/porfolio Página: https://lucasemg.github.io/porfolio/

@media screen and (max-width:400px) /*celulares retrato*/
@media (min-width:400px) and (max-width:498px) /*celulares landscape*/
@media (min-width:498px) and (max-width:630px) /*Tablets Pequenos Retrato*/
@media (min-width:630px) and (max-width:818px) /*Tablets Pequenos Landscape*/
@media (min-width:818px) and (max-width: 1200px) /*Tablets Grandes*/



insira o código aqui

1 Resposta 1

1

Olha isso não é uma resposta absoluta, pq vc tem que analisar aplicando no seu documento, mas a forma que vc está fazendo os @media pode sim ser otimizada usando orientation: portrait ou orientation: landscape

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

Documentação da Mozilla sobre o orientação de tela: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Aqui tem um exemplo básico para te ajudar a tratar esses media queries. Aqui tem um exemplo para orientação retrato

@media only screen 
  and (min-width: 400px) 
  and (max-width: 498px)
  and (orientation: portrait) {

  /*seu css aqui*/

}

Outro exemplo para orientação horizontal

@media only screen 
  and (min-width: 498px) 
  and (max-width: 630px)
  and (orientation: landscape) {

  /*seu css aqui*/

}

Isso significa que as 3 regras deve ser verdadeira para aplicar o CSS, o min-width, max-width e orientation devem corresponder ao @media para o CSS aplicar. Aqui vc pode ler mais sobre isso Usar @media, @media screen and ou @media only screen and Tem alguma diferença?


OBS: Esse recurso não corresponde à orientação do dispositivo. Abrir o teclado virtual em vários dispositivos na orientação retrato fará com que a janela de visualização fique mais larga do que alta, fazendo com que o navegador use estilos de paisagem em vez de retrato.

1
  • Putz Hugo, segunda vez que veio me salvar, meu caro! hahahahaha Enfim, muito obrigado, eu desconhecia a propriedade "orientation" pros @media. Eu vou tentar assim que chegar em casa, aí vamos ver se otimiza esse problema 25/02/2019 às 22:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .