Crie um site responsivo em uma semana: consultas de mídia (parte 4)

Contente

• 01. Adicionando consultas de mídia
• 02. Anatomia de uma consulta à mídia
• 03. Mais uma coisa ...
• 04. Escolhendo pontos de interrupção
• 05. Ajustando nossas miniaturas
• 06. Não apenas largura

• Conhecimento necessário: CSS e HTML intermediários
• Requer: Editor de texto, navegador moderno, software gráfico
• Tempo do projeto: 1 hora (5 horas no total)
• Arquivo de suporte

Uma parte relativamente nova da especificação CSS, as consultas de mídia são, sem dúvida, o aspecto mais empolgante do web design responsivo e uma área pronta para mais experimentação.

Tendo aceitado a necessidade de layouts adaptáveis, alguns viram as consultas de mídia como um meio de readaptar layouts adaptativos em sites de largura fixa existentes. Entre aqueles que adotaram layouts responsivos, muitos o fizeram da perspectiva da área de trabalho, ocultando conteúdo e recursos conforme a janela de exibição se estreita.

Ao longo deste tutorial, adotamos uma abordagem alternativa, móvel primeiro. Agora, enquanto procuramos incluir consultas de mídia, podemos pensar sobre adicionando recursos à medida que o espaço da tela aumenta, com a certeza de que a marcação e o design que sustentam nosso site fornecem uma linha de base respeitável.

Hoje, iremos além de nosso portfólio de padrões e construiremos as páginas individuais necessárias para nosso website. Ao fazer isso, veremos como as consultas de mídia são construídas e as implementamos de uma maneira realmente responsiva.

01. Adicionando consultas de mídia

Com os componentes de nosso portfólio de padrões completos e funcionando fora dos limites de qualquer layout, é hora de movê-los para as diferentes páginas que compõem nosso site.

Começaremos com nossa homepage. Do design voltado para a área de trabalho, podemos ver que em janelas de visualização mais amplas, nosso layout deve aparecer da seguinte forma:

Fazendo medições de nosso design, podemos descrever a área do documento em CSS da seguinte maneira:

.document {
preenchimento: 0 5%;
}
.a Principal {
largura: 74,242424242424%; / * 784/1056 * /
flutuar: esquerda;
}
.complementar {
largura: 22,727272727273%; / * 240/1056 * /
flutuar: certo;
}

Como aprendemos na segunda parte deste tutorial, estamos usando a seguinte fórmula para calcular a largura percentual dessas colunas:

(alvo / contexto) * 100 = resultado

Quando redimensionamos nosso navegador, veremos que o layout de nossa área de trabalho é dimensionado da tela menor para a maior. Claro, em tamanhos pequenos, as colunas são muito estreitas e os comprimentos de linha tão curtos que o conteúdo é difícil de ler. Só queremos esse layout quando houver espaço suficiente disponível para funcionar.

É aqui que entram as consultas de mídia. Supondo que esse layout só tenha efeito quando o navegador for mais largo que 768 px, podemos adicionar o seguinte CSS:

.document {
preenchimento: 0 5%;
}
@media screen e (largura mínima: 768px) {
.a Principal {
largura: 74,242424242424%; / * 784/1056 * /
flutuar: esquerda;
}
.complementar {
largura: 22,727272727273%; / * 240/1056 * /
flutuar: certo;
}
}

Agora, quando a janela de visualização é mais estreita do que 768 px, tudo dentro da consulta de mídia será ignorado. Ele será ignorado por qualquer navegador que também não ofereça suporte a consultas de mídia.

02. Anatomia de uma consulta à mídia

Para entender o que está acontecendo aqui, vejamos como uma consulta de mídia é construída. Podemos dividi-lo em duas partes:

• @media screen: A primeira parte de uma consulta de mídia é o tipo de mídia. Você pode reconhecer esta sintaxe se alguma vez incluiu estilos de impressão em seu CSS. Você também pode reconhecer o nome do tipo do meios de comunicação atributo no link> elemento. Isso ocorre porque ambos aceitam o conjunto aprovado de tipos de mídia encontrados na especificação CSS 2.1.
• (largura mínima: 768 px): A segunda parte é o inquerir. Isso inclui o característica a ser consultado (neste caso, a largura mínima da janela de visualização) e o correspondente valor para testar (768px).

Quando falamos sobre web design responsivo, há uma tendência de focar na largura, mas existem outros recursos que podemos testar também:

• (mín- | máx-) largura e (mín- | máx-) altura: Isso nos permite consultar a largura e a altura da janela de visualização (ou seja, a janela do navegador).
• (mín- | máx-) largura do dispositivo e (mín- | máx-) altura do dispositivo: Isso nos permite consultar a largura de toda a tela. Na minha experiência, geralmente é mais sensato basear os layouts na janela de visualização do que na tela.
• orientação: Você pode pensar imediatamente nas possibilidades aqui; pense em aplicativos que mostram conteúdo diferente com base na orientação do seu telefone - o mesmo é possível na web.
• (min- | max-) proporção da imagem: Isso nos permite adaptar layouts com base na proporção da janela do navegador ...
• (min- | max-) proporção de aspecto do dispositivo: … E isso nos permite fazer o mesmo com base na proporção do dispositivo. Owen Gregory escreveu um artigo maravilhoso no ano passado que explorou como podemos usar essa consulta para vincular nossos designs aos dispositivos em que aparecem.
• (min- | max-) monocromático: Também podemos testar se um dispositivo tem uma tela monocromática ou não. Imagine como isso seria útil se os dispositivos Kindle de tinta eletrônica da Amazon não mentissem e relatassem suas telas como coloridas!

A parte final de nossa consulta é possivelmente a mais útil. Usando e, podemos testar vários recursos em uma consulta. Por exemplo:

@media screen e (largura mínima: 768px) e (orientação: paisagem) {
...
}

Como você pode ver, as consultas de mídia podem nos ajudar a construir experiências bastante atraentes - e eu apenas toquei na superfície. Se você está procurando uma leitura leve para dormir, pode fazer pior do que ler a especificação de consulta de mídia do W3C, que descreve todos os recursos que podemos testar.

03. Mais uma coisa ...

Embora tenhamos incluído consultas de mídia em nosso CSS, se visualizarmos nosso site em um dispositivo móvel, você notará que nosso site ainda está sendo renderizado como se a tela tivesse mais de 768 px.

Para entender por que isso está acontecendo, precisamos fazer uma breve lição de história.

Quando o iPhone original foi anunciado em 2007, um de seus grandes pontos de venda era a capacidade de navegar na 'web real', mesmo que isso significasse sites orientados para desktop de largura fixa que precisavam ser compactados para caber em sua tela pequena. O iPhone foi capaz de fazer isso relatando que sua tela tinha 980 px de largura, antes de reduzir as páginas da web para caber em sua tela de 320 px.

Mas o iPhone foi introduzido antes do advento do design responsivo. Agora que os autores estão criando sites projetados para dispositivos móveis, esse recurso é menos útil. Felizmente, a Apple incluiu um meio de contornar esse comportamento e, uma vez que foi adotado por outros fabricantes, tornou-se quase um de fato padrão. Simplesmente envolve a adição de um único meta elemento para nossa marcação:

meta name = "viewport" content = "escala inicial = 1.0, largura = largura do dispositivo" />

Isso informa aos navegadores que reconhecem a janela de visualização que um site não deve ser reduzido e que a largura da janela do navegador deve ser tratada da mesma forma que a largura geral do dispositivo. Depois de adicionar esta linha, nosso site aparecerá com o layout pretendido:

04. Escolhendo pontos de interrupção

Voltemos à nossa consulta de mídia:

@media screen e (largura mínima: 768px) {
...
}

Os valores nos quais um layout se adapta são comumente chamados de pontos de interrupção. Se você se lembra, na parte dois eu disse que usar pixels é uma indicação de pensamento sem resposta, mas aqui eu escolhi 768px, provavelmente porque é a largura de um dispositivo familiar.

Em vez de escolher pontos de interrupção com base nas características de dispositivos populares, pode ser mais eficaz observar os valores derivados de nosso conteúdo, por exemplo, comprimentos de linha confortáveis ​​para leitura ou o tamanho máximo de uma imagem.

Com nosso tipo sendo dimensionado usando ems, parece sensato que nossas consultas de mídia usem ems também. Na verdade, isso traz um benefício adicional. Quando um usuário redimensiona o texto no navegador, as páginas se adaptam para usar pontos de interrupção menores. Nosso site não se adaptará apenas com base no tamanho da janela de visualização, mas também com o tamanho da fonte. Na verdade, foi só quando vi Jeremy Keith demonstrar consultas de mídia baseadas em em que percebi o quão poderosas elas podem ser.

Embora nosso projeto possa fornecer alguma indicação de possíveis pontos de interrupção, geralmente a melhor maneira de escolhê-los é por meio da experimentação. Ajustando a largura da janela do navegador, decidi que 800px é uma boa largura para trocar para um layout mais complexo.

Porém, como podemos expressar em 800px no ems? Novamente, podemos usar nossa fórmula, mas qual é o contexto? Ao calcular o ems para consultas de mídia, o contexto é sempre o tamanho de fonte padrão do navegador independentemente de este valor ter sido substituído em seu CSS. Esse padrão é normalmente 16 px, o que nos dá:

800 / 16 = 50

Agora podemos atualizar nossa consulta de mídia da seguinte forma:

@media screen e (min-width: 50em) {/ * 800px * /
...
}

05. Ajustando nossas miniaturas

Você se lembrará de que, na parte 2, modelamos nossas miniaturas para que sejam responsivas. No entanto, quando as imagens dentro dessas miniaturas atingem sua largura total, uma área de espaço em branco aparece à direita de cada imagem. Novamente, as consultas de mídia nos permitem corrigir isso.

Aqui está nosso CSS original:

ol.media li.media-item {
cor de fundo: #fff;
margem: 0 4,166666666667% 4,166666666667% 0;
largura: 47,91666666667%;
flutuar: esquerda;
}
ol.media li.media-item: enésimo filho (2n) {
margem direita: 0;
}

O ponto em que esse espaço em branco aparece é quando o navegador fica mais largo do que o 560px.Vamos escolher esse valor para trocar para mostrar três miniaturas por linha. Podemos fazer isso adicionando o seguinte CSS:

@media screen e (min-width: 35em) {
.media-item {
largura: 30,612244897959%; / * 240/784 * /
margem: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
. item de mídia: n-ésimo filho (3n) {
margem direita: 0;
}
}

Observe que não precisamos reescrever todos os estilos necessários para a miniatura dentro desta consulta de mídia, apenas as partes que desejamos adaptar.

Vendo essa mudança no navegador, você notará que não há margem à direita de cada segunda miniatura. Isso ocorre porque a seguinte regra CSS ainda permanece ativa:

ol.media li.media-item: enésimo filho (2n) {
margem direita: 0;
}

Precisamos modificar o CSS em nossa consulta de mídia para redefinir esse valor:

@media screen e (min-width: 35em) {
.media-item {
largura: 30,612244897959%; / * 240/784 * /
margem: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
. item de mídia: n-ésimo filho (2n) {
margem direita: 4,081632653061%;
}
. item de mídia: n-ésimo filho (3n) {
margem direita: 0;
}
}

Ao criar consultas de mídia, sempre esteja ciente de problemas de herança como este.

06. Não apenas largura

É importante pensar sobre as consultas de mídia não apenas em termos de largura, mas também em outras variáveis. Por exemplo, o vídeo em nossa página de item de mídia fica parcialmente oculto quando a altura da janela de visualização diminui. Temos a tecnologia:

.media-object-wrapper {
fundo acolchoado: 56,25%;
largura: 100%;
altura: 0;
posição: relativa;
}
@media screen e (max-height: 35em) e (orientação: paisagem) {/ * 560px * /
.media-object-wrapper {
largura: 60%;
fundo acolchoado: 33,75%;
}
}

Inclusive, incluí uma consulta de orientação para refinar ainda mais esse comportamento.

Podemos seguir uma abordagem semelhante para as outras partes de nosso design, trocando uma versão maior do cabeçalho e movendo os links de navegação para o topo da página assim que houver espaço disponível.

• Veja nossa página inicial responsiva
• Veja nossa página de item de mídia responsiva

E aí temos que! Construímos um site responsivo - e com um dia de folga! Bem, não exatamente. Layouts, imagens e consultas de mídia flexíveis são apenas o início do processo de design responsivo.

Amanhã: Na parte final deste tutorial, iremos além do web design responsivo e veremos como podemos construir sites realmente responsivos.

Paul é um designer de interação baseado em Brighton, Inglaterra. Ele fica mais feliz ao criar interfaces simples, mas envolventes, que são nativas da web.