Aula WEBI04 (Design Responsivo)

Prévia do material em texto

<p>Desenvolvimento</p><p>Web I</p><p>Desenvolvimento de Software Multiplataforma</p><p>Prof. Esp. Wládisson Mancinelli Júnior</p><p>wladisson.mancinelli@fatec.sp.gov.br</p><p>Aula 04 Design Responsivo</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Introdução ao Design Responsivo com Media Queries</p><p>Objetivo</p><p>Compreender o conceito de design responsivo e aprender a utilizar media queries no CSS para</p><p>criar layouts que se ajustem a diferentes tamanhos de tela.</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>O que é Design Responsivo?</p><p>Design responsivo é uma abordagem de desenvolvimento web que visa criar páginas que se</p><p>adaptam a diferentes tamanhos de tela e dispositivos, como smartphones, tablets e desktops. Em</p><p>vez de criar múltiplas versões do mesmo site para diferentes dispositivos, o design responsivo usa</p><p>técnicas que permitem que o conteúdo se ajuste automaticamente ao tamanho da tela.</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>O que são Media Queries?</p><p>Media queries são regras CSS que permitem aplicar estilos diferentes com base nas características</p><p>do dispositivo, como a largura da tela, a altura, a orientação, a resolução e outros.</p><p>Elas são uma das principais ferramentas para criar layouts responsivos.</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Estrutura Básica de Media Queries</p><p>A estrutura básica de uma media query é a seguinte:</p><p>@media (condição) {</p><p>/* Estilos CSS aqui */</p><p>}</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Sintaxe e Exemplos</p><p>Media Query para Largura de Tela</p><p>Para ajustar os estilos com base na largura da tela, usamos a condição min-width ou max-width.</p><p>Por exemplo:</p><p>/* Estilos para telas com largura mínima de 600px */</p><p>@media (min-width: 600px) {</p><p>body {</p><p>background-color: lightblue;</p><p>}</p><p>}</p><p>/* Estilos para telas com largura máxima de 599px */</p><p>@media (max-width: 599px) {</p><p>body {</p><p>background-color: lightcoral;</p><p>}</p><p>}</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Sintaxe e Exemplos</p><p>Media Query para Múltiplas Condições</p><p>Você pode combinar múltiplas condições usando and:</p><p>/* Estilos para telas com largura entre 600px e 900px */</p><p>@media (min-width: 600px) and (max-width: 900px) {</p><p>body {</p><p>font-size: 18px;</p><p>}</p><p>}</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Sintaxe e Exemplos</p><p>Media Query para Orientação</p><p>Para ajustar estilos com base na orientação da tela (paisagem ou retrato), usamos orientation:</p><p>/* Estilos para dispositivos em orientação retrato */</p><p>@media (orientation: portrait) {</p><p>body {</p><p>background-color: lightgreen;</p><p>}</p><p>}</p><p>/* Estilos para dispositivos em orientação paisagem */</p><p>@media (orientation: landscape) {</p><p>body {</p><p>background-color: lightyellow;</p><p>}</p><p>}</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Aplicando Media Queries em um Projeto Prático</p><p>Vamos criar um exemplo simples de um layout responsivo usando HTML e CSS.</p><p>Design Responsivo</p><p>Desenvolvimento Web I</p><p>Atividade Prática</p><p>1. Crie um perfil com foto, profissão, formação acadêmica, formação complementar, atuações</p><p>profissionais e contato. Esse perfil deve ter design responsivo para smartphones, tablets e</p><p>desktops usando HTML e CSS;</p><p>2. Aplique as media queries fornecidas;</p><p>3. Adapte o layout e as cores com base no tamanho da tela;</p><p>4. Teste o layout em diferentes tamanhos de janela do navegador.</p><p>Desenvolvimento</p><p>Web I</p><p>Desenvolvimento de Software Multiplataforma</p><p>Prof. Esp. Wládisson Mancinelli Júnior</p><p>wladisson.mancinelli@fatec.sp.gov.br</p><p>Aula 04 Design Responsivo</p><p>Slide 1</p><p>Slide 2</p><p>Slide 3</p><p>Slide 4</p><p>Slide 5</p><p>Slide 6</p><p>Slide 7</p><p>Slide 8</p><p>Slide 9</p><p>Slide 10</p><p>Slide 11</p>