CSS: Design responsivo

Name: CSS: Design responsivo
Author: Cliff Brozo

Como garantir que tua página da web seja exibida correctamente em qualquer dispositivo

Preview the first lesson free — get full access to all 4 lessons.

Curso: sob demanda

(música leve) Bem-vindo de volta ao curso da Cidade do Conhecimento em folhas de estilo em cascata. Sou Cliff Brozo, sou seu professor. E na lição de hoje, vamos falar sobre design responsivo, como as coisas vão mudar conforme a janela de visualização muda. Aprenderemos sobre as diferentes viewports. Vamos descobrir o que queremos dizer com visualização em grade e como o colocamos para funcionar. Exploraremos as consultas de mídia e veremos os contêineres e como usá-los. Vejamos a janela de visualização. É a área visível dos usuários. Dependendo do dispositivo que o usuário está olhando, pode ser um telefone, pode ser um tablet, pode ser um desktop, pode ser um laptop. E o que fazemos é codificar nosso HTML para prestar atenção a qual dispositivo o usuário está usando. E então podemos estilizar nosso código para se ajustar perfeitamente a esse dispositivo. Uma visão de grade responsiva nos permite reunir linhas e colunas e divida a página em pedaços. E podemos então identificar cada uma dessas peças e estilizá-los de forma diferente. As consultas de mídia nos permitem dar uma olhada nessa janela de visualização e testar o dispositivo do usuário para ver qual ele ou ela está usando. Em seguida, podemos definir nossa largura e altura para maximizar nossas páginas em seu dispositivo. Escala de imagens responsivas, e há diferentes maneiras de dimensionar a imagem para caber no dispositivo. Certamente gostamos de manter nossa proporção de aspecto para que a imagem não distorça, o que significa que raramente queremos esticar uma imagem para caber em uma área de conteúdo de tamanho incorreto. As imagens responsivas têm três possibilidades. Eles podem estar contidos em uma determinada área, como você pode ver, a ponte de Londres está perfeitamente contida nesta caixa quadrada. Se pedirmos ao navegador para ajustar a London Bridge usando 100% do tamanho da imagem, perdemos parte da imagem. O resto não se encaixa e como você pode ver, fica distorcido. E, finalmente, se perguntarmos ao navegador para cobrir toda a área, bem, isso não é apenas uma caixa simples, se você parece muito, bem próximo no canto inferior direito, lá está o topo da London Bridge porque essa é essa parte da imagem bem ali. As consultas de mídia nos permitem colocar imagens diferentes em telas diferentes. Portanto, dependendo do dispositivo do usuário, o usuário verá uma imagem muito diferente essencialmente das mesmas coisas. Os contêineres nos permitem criar caixas do tipo Excel e coloque as coisas nessas caixas. Podemos ter linhas e colunas normais que podem ou podem não ser do mesmo tamanho, ou podemos usar a imaginação e criar um grupo diferente de linhas e colunas com sobreposições e áreas que não são do mesmo tamanho. Então, vamos ver como tudo isso funciona.

Intermediário Fornecedor : Cliff Brozo 4 lições · 22m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este curso discute técnicas de design responsivo com CSS. Isto garante que as páginas da web caibam no ecrã de qualquer dispositivo que estejas a usar: telemóvel, tablet ou desktop. Aprenderás o que é a janela de visualização e como determinar qual dispositivo está a ser usado. Também examinarás a visualização em grade, consultas de mídia, contêineres e como usar CSS para fazer o layout de páginas.

O Que Você Vai Aprender

Navegar pelo viewport e determinar qual dispositivo está sendo usado
Aplicar media queries e containers para adaptar layouts em todos os dispositivos
Colocar CSS grid view em funcionamento para layout de página
Usar CSS para fazer layout de páginas para que se encaixem em telas de telefone, tablet e desktop
Construir designs web responsivos com frameworks HTML e CSS responsivos

Principais Conclusões

Design responsivo com CSS garante que páginas web se encaixem na tela de qualquer dispositivo sendo usado, incluindo telefone, tablet ou desktop.
O curso explica o que é o viewport e como determinar qual dispositivo está sendo usado.
Examina grid view, media queries e containers como ferramentas para fazer layout de páginas.
O curso abrange usar CSS para fazer layout de páginas de forma responsiva.

Perguntas Frequentes

O que este curso abrange?

Abrange técnicas de design responsivo com CSS, incluindo o viewport, determinação de qual dispositivo está sendo usado, grid view, media queries, containers e uso de CSS para fazer layout de páginas.

O que aprenderei a fazer?

Você aprenderá a navegar pelo viewport, explorar media queries e containers e colocar grid view em funcionamento.

Por que o design responsivo é importante?

Design responsivo garante que páginas web se encaixem na tela de qualquer dispositivo que você esteja usando: telefone, tablet ou desktop.

Como o curso é estruturado?

O curso é dividido em quatro lições: Design Responsivo Parte 1 até Parte 4.

Quais habilidades este curso constrói?

Constrói habilidades em Códigos CSS, Frameworks CSS, CSS Grid, CSS Orientado a Objetos, HTML Responsivo e Design Web Responsivo.