Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
03/06/2017
Semana 17
Responsividade
Responsividade
• A página web se adapta ao tamanho das telas de todos os dispositivos
• Não é programa ou JavaScript
• Responsividade web design: quando CSS + HTML são utilizados para
redimensionar, ocultar, encolher, aumentar ou mover o conteúdo da
página para que ela tenha uma boa aparência em qualquer tela.
• Demo
2
Responsividade
Viewport
• Área visível da página web do usuário
• HTML 5: introdução de um método para controlar o viewport, através
de <meta>
4
Viewport (exemplo)
5
Grid-View
• A páginas é dividida em
colunas
• Ajuda muito no design de
páginas web
• Torna fácil a alocação de
elementos na página
• Um grid-view responsivo
geralmente tem 12 colunas e
width = 100%
http://www.w3schools.com/css/tryresponsive_grid.htm
6
Grid-View
• Box-sizing = border-box para todas as caixas
• Exemplo
http://www.w3schools.com/cssref/css_selectors.asp
7
Grid-View
• Para maior controle sobre a
página podemos usar até doze
colunas
• 100% de largura / 12 = 8.33%
• Criamos uma classe para cada
coluna com o nome class="col-"
e um número definindo
quantas colunas queremos
alcançar
8
Grid-View
• As colunas dentro de uma linha flutuarão à esquerda
http://www.w3schools.com/cssref/css_selectors.asp
9
Grid-View
• As colunas dentro de linha estão todas flutuando a esquerda e outros
serão posicionados como se as colunas não existissem. Para resolver
este problema será utilizado:
• Resultado final
10
Exercício: Laboratório
• Construir o layout
mostrado na figura.
Crie uma biblioteca
CSS responsiva e
utilize as novas tags
HTML 5. Aplique
efeitos no menu ao
passar o cursor do
mouse.
Media Query
• É usado para aplicar um bloco de propriedades CSS somente se certas
condições forem satisfeitas
• Exemplos:
12
Media Query
Media Query
CSS3 + HTML5: imagens
• O elemento <picture> do HTML5
• Utilizado para definir várias imagens (várias fontes, uma imagem)
• srcset: obrigatório. Define a fonte da imagem
• media: opcional. Aceita media queries do CSS3
• <img>: para navegadores que não oferecem suporte ao <picture>
• Exemplo:
15
Exercício: Laboratório
• Construir o layout mostrado na figura abaixo. As imagens deverão ser
alteradas conforme a resolução.
Desktop Tablet Smartphone
CSS - Responsividade
• Criação de framework próprio
• Exemplos de frameworks:
• Bootstrap (Tutorial no W3Schools)
• w3.css
17