Gostaria de saber como posso mudar o layout da tela confome mudo a orientação do dispositivo.
Gostaria de saber como posso mudar o layout da tela confome mudo a orientação do dispositivo.
hoje, com a Alura e o Google Gemini
Cara da pra fazer isso via CSS, não sei exatamente o que estas pretendendo fazer, mas se for puramente layout podes usar media query para tratar isso
@media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
@media all and (orientation:landscape) {
/* Styles for Landscape screen */
}Espero ter ajudado.
Abaixo segue o capitulo "6.3 - CSS3 media queries" da APOSTILA DESENVOLVIMENTO WEB COM HTML, CSS E JAVASCRIPT que aborda o assunto.
Todos os smartphones e navegadores modernos suportam uma nova forma de adaptar o CSS baseado nas propriedades dos dispositivos, as media queries do CSS3.
Em vez de simplesmente falar que determinado CSS é para handheld em geral, nós podemos agora indicar que determinadas regras do CSS devem ser vinculadas a propriedades do dispositivo como tamanho da tela, orientação (landscape ou portrait) e até resolução em dpi.
Outra forma de declarar os media types é separar as regras dentro do mesmo arquivo CSS:
@media screen { body { font-size: 16px; } }
@media (max-width: 480px) { body { font-size: 12px; } } Repare como o atributo media agora pode receber expressões complexas. No caso, estamos indicando que queremos que as telas com largura máxima de 480px tenham uma fonte de 12px.
Você pode testar isso apenas redimensionando seu próprio navegador Desktop para um tamanho menor que 480px.