29. O que é viewport?
Nessa aula, vou te explicar como usar o viewport nos nossos sites, utilizando o layout da Lauch como exemplo. O viewport é a área visível do seu site na tela do dispositivo do visitante. Quando você aplica o viewport, o navegador ajusta automaticamente o conteúdo ao tamanho da tela do usuário, independentemente de ser uma tela pequena ou grande. É importante lembrar que o viewport só funciona na vertical, então, isso deve ser configurado na altura (height) e não na largura (horizontal). Vou demonstrar como ajustar a cor e os elementos do site para que se adaptem a diferentes tamanhos de tela e não deixem espaços em branco indesejados. Ao colocar 50 ou 92 como valor de viewport, ele ocupa 50% ou 92% da tela respectivamente, ajustando os elementos conforme esse percentual. Isso é útil, mas devemos prever que monitores muito grandes ou muito pequenos podem exigir ajustes adicionais para não quebrar o layout. O viewport não é 100% preciso em todos os dispositivos, como iPhones, que podem não corresponder exatamente aos 100% definidos. Veremos também como mover menus e outros elementos para fora do div onde o viewport é aplicado, mantendo o layout consistente. Por fim, falarei sobre como usar o viewport para criar menus que ocupam a tela inteira e como ajustar a visualização enquanto cria para não trabalhar com layouts visuais muito grandes. Espero que essa aula tenha te ajudado a entender como usar o viewport no design de sites. Até a próxima!
Comentários
Nessa aula, vou te explicar como usar o viewport nos nossos sites, utilizando o layout da Lauch como exemplo. O viewport é a área visível do seu site na tela do dispositivo do visitante. Quando você aplica o viewport, o navegador ajusta automaticamente o conteúdo ao tamanho da tela do usuário, independentemente de ser uma tela pequena ou grande. É importante lembrar que o viewport só funciona na vertical, então, isso deve ser configurado na altura (height) e não na largura (horizontal). Vou demonstrar como ajustar a cor e os elementos do site para que se adaptem a diferentes tamanhos de tela e não deixem espaços em branco indesejados. Ao colocar 50 ou 92 como valor de viewport, ele ocupa 50% ou 92% da tela respectivamente, ajustando os elementos conforme esse percentual. Isso é útil, mas devemos prever que monitores muito grandes ou muito pequenos podem exigir ajustes adicionais para não quebrar o layout. O viewport não é 100% preciso em todos os dispositivos, como iPhones, que podem não corresponder exatamente aos 100% definidos. Veremos também como mover menus e outros elementos para fora do div onde o viewport é aplicado, mantendo o layout consistente. Por fim, falarei sobre como usar o viewport para criar menus que ocupam a tela inteira e como ajustar a visualização enquanto cria para não trabalhar com layouts visuais muito grandes. Espero que essa aula tenha te ajudado a entender como usar o viewport no design de sites. Até a próxima!
Comentários
Nessa aula, vou te explicar como usar o viewport nos nossos sites, utilizando o layout da Lauch como exemplo. O viewport é a área visível do seu site na tela do dispositivo do visitante. Quando você aplica o viewport, o navegador ajusta automaticamente o conteúdo ao tamanho da tela do usuário, independentemente de ser uma tela pequena ou grande. É importante lembrar que o viewport só funciona na vertical, então, isso deve ser configurado na altura (height) e não na largura (horizontal). Vou demonstrar como ajustar a cor e os elementos do site para que se adaptem a diferentes tamanhos de tela e não deixem espaços em branco indesejados. Ao colocar 50 ou 92 como valor de viewport, ele ocupa 50% ou 92% da tela respectivamente, ajustando os elementos conforme esse percentual. Isso é útil, mas devemos prever que monitores muito grandes ou muito pequenos podem exigir ajustes adicionais para não quebrar o layout. O viewport não é 100% preciso em todos os dispositivos, como iPhones, que podem não corresponder exatamente aos 100% definidos. Veremos também como mover menus e outros elementos para fora do div onde o viewport é aplicado, mantendo o layout consistente. Por fim, falarei sobre como usar o viewport para criar menus que ocupam a tela inteira e como ajustar a visualização enquanto cria para não trabalhar com layouts visuais muito grandes. Espero que essa aula tenha te ajudado a entender como usar o viewport no design de sites. Até a próxima!
Comentários

Nível Physis
Destravando

Nível Physis
Destravando

Nível Physis
Destravando
Especialistas

Henrique Sabino
Fundador da Harena
Mentor
Níveis
Hashtags
#Viewport #ResponsiveDesign #WebDevelopment #LayoutAdjust #CSS

Olá 👋,
Em que posso ajudar?
Sugestões & Feedbacks