Photo by Austin Chan on Unsplash

Understaing Media querys , Turn your website responsive for differents screens

Nesse artigo vamos ver a fundo:

• Building web pages for multiple devices and screen sizes(construindo paginas para multiple devices)
•  Using media queries to alter your design based on viewport size(usar media queries para alterar o desing baseado no tamanho do viewport)
•  Taking the “mobile first” approach
•  Responsive images (imagens responsivas?)

Mas como funciona essa idea de design reponsivo?

No nosso mundo moderno, a web está em todo lugar. Usamos em nossos desktops no escritório. Deitamos na cama navegando em nossos tablets. Está até mesmo em algumas de nossas telas de televisão na sala de estar. E a carregamos para todos os lugares em nossos smartphones. A plataforma web de HTML, CSS e JavaScript é um ecossistema universal, diferente de qualquer coisa que veio antes.

Isso apresenta um problema interessante para nós, como desenvolvedores web: Como projetamos nosso site para que seja utilizável e atraente em qualquer dispositivo que nossos usuários possam usar para acessá-lo? Inicialmente, muitos desenvolvedores abordaram esse problema criando dois sites: desktop e móvel. O servidor então redirecionava dispositivos móveis de http://www.meusite.com para http://m.meusite.com.

Este site móvel geralmente oferecia uma experiência mais minimalista e um design simplificado para telas menores.

Essa abordagem começou a falhar à medida que mais e mais dispositivos surgiam no mercado. Você direciona um tablet para o site móvel ou para o desktop? E um telefone “phablet” grande? Um iPad Mini? E se um usuário móvel quiser realizar uma ação que você só tem disponível na versão desktop do seu site? No final, uma dicotomia forçada entre desktop e móvel causa mais problemas do que resolve. Além disso, você precisa manter um site extra para fazer isso funcionar.

Uma abordagem muito melhor é servir o mesmo HTML e CSS para todos os seus usuários. Usando algumas técnicas-chave, você pode fazer seu conteúdo ser renderizado de maneira diferente, com base no tamanho da janela do navegador do usuário (ou, ocasionalmente, com base na resolução da tela).

Dessa forma, você não precisa de dois sites distintos. Você cria um site que funciona em um smartphone, tablet ou qualquer outra coisa que você possa imaginar. Essa abordagem, popularizada pelo designer web Ethan Marcotte, é chamada de design responsivo.

Enquanto você navega na web, preste atenção nos designs responsivos que encontrar. Veja como os sites respondem a diferentes larguras de navegador. Sites de jornais são particularmente interessantes porque têm muito conteúdo comprimido na página.

www.bostonglobe.com/ é um ótimo exemplo, oferecendo um layout de uma, duas ou três colunas, dependendo da largura da janela do navegador. Normalmente, você pode redimensionar a largura da janela do navegador e ver o layout da página responder imediatamente. Isso é o design responsivo em ação.

3 Colunas na versão desktop (telas maiores)

Uma coluna na versão mobile

Os três princípios-chave do design responsivo:

1. Uma abordagem de design mobile first.

Isso significa que você constrói a versão móvel antes de construir o layout para desktop.

2. A regra @media.

Com essa regra, você pode adaptar seus estilos para viewports de diferentes tamanhos. Essa sintaxe (frequentemente chamada de media queries) permite que você escreva estilos que só se aplicam em determinadas condições.

3. O uso de layouts fluidos.

Essa abordagem permite que contêineres escalem para diferentes tamanhos com base na largura do viewport.

Vamos começar construindo uma página responsiva, e vou explicar cada um deles à medida que avançamos. Depois disso, também vamos analisar imagens, que requerem considerações especiais em sites responsivos.

Mobile First

O primeiro princípio do design responsivo é mobile first. Como mencionado, isso significa exatamente o que parece: você constrói seu layout móvel antes de construir o desktop. Esta é a melhor maneira de garantir que ambas as versões funcionem.

Desenvolver para dispositivos móveis é um exercício de restrições. O espaço da tela é limitado. A rede geralmente é mais lenta. O usuário em um dispositivo móvel utiliza um conjunto diferente de controles interativos. Digitar é possível, mas complicado. O usuário não pode passar o mouse sobre elementos para acionar efeitos. Se você começar projetando um site interativo completo e depois tentar reduzi-lo para atender a essas restrições, você frequentemente falhará.

Em vez disso, a abordagem mobile first dita que você projete seu site com essas restrições em mente desde o início. Uma vez que sua experiência móvel funcione (ou pelo menos esteja planejada), você pode usar “progressive enhancement” para aprimorar a experiência para usuários de telas grandes.

O que vamos contruir?

Esta página tem três componentes principais: um cabeçalho, a imagem principal(hero image) com um pouco de texto sobreposto e o conteúdo principal(.container). Vamos também mostrar um menu oculto tocando ou clicando no ícone no canto superior direito (figura abaixo). Esse ícone, com três linhas horizontais, é frequentemente chamado de ícone de hambúrguer porque se assemelha aos pães e ao hambúrguer de um lanche.

Um layout móvel é principalmente um design sem firulas. Além do menu interativo, esse design é altamente focado no conteúdo. Em telas maiores, você pode se dar ao luxo de dedicar muito espaço a coisas como o cabeçalho, a imagem principal e o menu. Mas em dispositivos móveis, os usuários costumam ser mais orientados por tarefas. Eles podem estar fora com amigos e querer encontrar rapidamente o horário de funcionamento da loja ou outra informação específica, como um preço ou endereço.

Um design móvel é sobre o conteúdo. Considere um design para desktop que tem um artigo de um lado e uma barra lateral do outro, onde a barra lateral tem links e itens menos importantes. Você vai querer garantir que o artigo apareça primeiro no design móvel. Isso significa que você vai querer que o conteúdo mais importante apareça primeiro no HTML. Convenientemente,

Mobile page with the menu opened by clicking or tapping the hamburger icon

Isso coincide com preocupações de acessibilidade: um leitor de tela chega diretamente ao “conteúdo principal” ou um usuário navegando via teclado acessa os links no artigo antes dos links na barra lateral.

Dito isso, essa regra nem sempre é rígida. Você provavelmente poderia argumentar que sua imagem principal não é tão importante quanto o conteúdo abaixo dela. Mas é uma parte marcante do design; então, nesse caso, acho que vale a pena manter essa imagem próxima ao topo da página. Além disso, ela contém pouco conteúdo, portanto, requer um esforço mínimo para navegar por ela.

IMPORTANTE: Ao escrever o HTML para um design responsivo, é crucial garantir que ele tenha tudo o que você precisa para cada tamanho de tela. Você pode aplicar CSS diferente para cada instância, mas todas devem compartilhar o mesmo HTML.

Agora, vamos considerar nosso design para viewports maiores. Você codificará o layout móvel primeiro, mas manter seu design geral em mente ajudará a guiar suas decisões enquanto faz isso. Para este exercício, você adicionará um breakpoint médio e um grande. A Figura abaixo mostra o layout médio.

o que é um breakpoint— Um ponto específico em que os estilos da página mudam para fornecer o melhor layout possível para o tamanho da tela.

Neste tamanho de viewport, você tem um pouco mais de espaço para trabalhar. O cabeçalho e a imagem principal podem ter mais padding. Os itens do menu podem se encaixar lado a lado em uma linha para que eles

Você pode refinar ainda mais uma media query unindo duas cláusulas com a palavra-chave and:

@media (min-width: 20em) and (max-width: 35em) { 
  /* estilos aqui */
}

Essa media query combinada só tem como alvo dispositivos que atendem a ambos os critérios. Se você quiser uma media query que tenha como alvo um de vários critérios, use uma vírgula:

@media (max-width: 20em), (min-width: 35em) { 
  /* estilos aqui */
}

Este exemplo tem como alvo ambos os viewports de 20 em ou menos e aqueles de 35 em ou mais.

MIN-WIDTH, MAX-WIDTH E ALÉM

Nos exemplos, você usou min-width, que tem como alvo dispositivos com uma viewport acima de uma certa largura, e max-width, que tem como alvo dispositivos abaixo de uma certa largura. Cada um deles é chamado de media feature. min-width e max-width são os mais comuns que você usará. Mas você também pode usar vários outros tipos de media features. Aqui estão alguns exemplos:

• (min-height: 20em) - Tem como alvo viewports de 20 em ou mais altas.
• (max-height: 20em) - Tem como alvo viewports de 20 em ou mais baixas.
• (orientation: landscape) - Tem como alvo viewports que são mais largas do que altas.
• (orientation: portrait) - Tem como alvo viewports que são mais altas do que largas.
• (min-resolution: 2dppx) - Tem como alvo dispositivos com uma resolução de tela de 2 dots por pixel ou mais; tem como alvo telas retina.
• (max-resolution: 2dppx) - Tem como alvo dispositivos com uma resolução de tela de até 2 dots por pixel.

Consulte a documentação do MDN em Media Queries para uma lista completa de media features.

Resoluções baseadas em media queries

As media queries baseadas em resolução podem ser um pouco complicadas, pois o suporte do navegador para isso é mais recente. Alguns navegadores têm suporte limitado e/ou requerem uma sintaxe proprietária. IE9–11 e Opera Mini, por exemplo, não suportam a unidade dppx, então você precisará usar a unidade dpi (dots per inch) em vez disso (por exemplo, 192 dpi em vez de 2 dppx). Safari e iOS Safari suportam a media feature proprietária -webkit-min-device-pixel-ratio. Em resumo, a melhor maneira de direcionar uma tela de alta resolução (retina) é combinar as duas:

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) { 
  /* estilos aqui */
}

Essa abordagem funcionará em todos os navegadores modernos. Use-a quando quiser servir imagens ou ícones de alta resolução para telas que podem se beneficiar deles. Dessa forma, os usuários com telas de resolução mais baixa não desperdiçarão largura de banda carregando imagens maiores quando não conseguirão ver a diferença.

Exemplo de consulta de mídia no link

Você também pode colocar uma media query na tag <link>. Adicionar <link rel="stylesheet" media="(min-width: 45em)" href="large-screen.css" /> à sua página aplicará o conteúdo do arquivo large-screen.css à página apenas se a media query min-width for verdadeira. Observe que a folha de estilos sempre será baixada, independentemente da largura da viewport, então esta é apenas uma tática para organização de código, não para redução de tráfego de rede.

Understanding types of media query(TIPOS DE MÍDIA)

Uma última opção disponível nas suas media queries é a capacidade de direcionar o tipo de mídia. Os dois tipos de mídia que você geralmente precisará considerar são screen e print. Usar uma media query de impressão permite controlar como sua página será exibida se o usuário imprimir a página, para que você possa fazer coisas como remover imagens de fundo (para economizar tinta) e ocultar navegação desnecessária. Quando um usuário imprime a página, ele geralmente deseja apenas o texto principal da página. Para escrever estilos de impressão que se aplicam apenas ao imprimir, use a consulta @media print. Não são necessários parênteses como com min-width e outras media features. Para direcionar apenas a tela, use @media screen.

Considerações para estilos de impressão

Quando se trata de desenvolvimento de CSS, os estilos de impressão são frequentemente uma reflexão tardia, se é que são considerados. Mas é bom considerar se seus usuários podem querer imprimir alguma de suas páginas. Para ajudar na impressão, existem alguns passos comuns que você deve tomar. Na maioria dos casos, será útil aplicar estilos de impressão básicos dentro de uma media query @media print {...}. Use display: none para ocultar partes não essenciais da página, como menus de navegação e rodapés. Se um usuário estiver imprimindo uma página, ele quase certamente se importará apenas com o conteúdo principal da página. Você também pode alterar globalmente as cores das fontes para preto e remover todas as imagens de fundo e cores atrás dos blocos de texto. Em muitos casos, um seletor universal faz o trabalho para isso. Eu uso !important aqui para não precisar me preocupar com a cascata anulando-o:

@media print { 
  * {
    color: black !important;
    background: none !important;
  }
}

Gastar até mesmo um breve período de tempo em estilos de impressão pode ser um ótimo serviço para seus usuários. Se você estiver trabalhando em um site onde espera muita impressão (por exemplo, um site de receitas), você vai querer gastar mais tempo garantindo que tudo seja impresso corretamente.

Adicionando breakpoints à página

Praticamente falando, uma abordagem mobile-first significa que o tipo de media query que você usará mais deve ser min-width. Você escreverá seus estilos móveis primeiro, fora de qualquer media query. Em seguida, você trabalhará para atingir breakpoints maiores. Isso segue a estrutura geral mostrada no exemplo a seguir. (Você não precisa adicionar isso à sua página ainda.)

Adicionando colunas responsivas

A última alteração a ser feita para o breakpoint médio é a introdução de várias colunas. Isso é feito exatamente como os layouts de várias colunas que você construiu em capítulos anteriores. Você só precisa envolvê-los em uma media query, para que não se apliquem abaixo de um certo breakpoint. Quando você escreveu seu markup, adicionou uma classe de linha e coluna onde previu um layout de três colunas. Vamos definir os estilos para isso agora. Adicione este exemplo ao seu stylesheet.

Agora, redimensione seu navegador para ver as colunas se encaixarem no breakpoint. Nenhum estilo específico se aplica a esses elementos abaixo do breakpoint, então eles se empilham um sobre o outro de acordo com o fluxo normal do documento. Acima do breakpoint, eles se tornam um contêiner flex com itens flexíveis. Grande parte do design responsivo se resumirá a esse tipo de abordagem: quando seu design exige itens lado a lado, coloque-os lado a lado apenas em telas maiores. Em telas menores, permita que seus elementos fiquem em sua própria linha e ocupem a largura da tela. Esta técnica pode ser aplicada a colunas, objetos de mídia ou qualquer outro item que se sinta apertado em uma tela estreita.

Layouts fluidos

O terceiro e último princípio do design responsivo é o layout fluido. Layout fluido (às vezes chamado de layout líquido) refere-se ao uso de contêineres que crescem e encolhem de acordo com a largura da viewport. Isso é diferente de um layout fixo, onde as colunas são definidas usando pixels ou ems. Um contêiner fixo (por exemplo, um com largura: 800px) transbordará a viewport em dispositivos menores, forçando a necessidade de rolagem horizontal. Um contêiner fluido encolhe automaticamente para se ajustar.

Em um layout fluido, o contêiner principal da página normalmente não tem uma largura explícita, ou tem uma definida usando uma porcentagem. Pode, no entanto, ter padding esquerdo e direito, ou margens automáticas à esquerda e à direita para adicionar espaço entre suas bordas e as bordas da viewport. Isso significa que ele pode ser ligeiramente mais estreito que a viewport, mas nunca mais largo. Dentro do(s) contêiner(es) principal(is), quaisquer colunas são definidas usando uma porcentagem (por exemplo, uma coluna principal de 70% de largura e uma barra lateral de 30% de largura). Dessa forma, não importa

Imagens responsivas

No design responsivo, as imagens precisam de atenção especial. Você não só precisa encaixá-las na tela, mas também deve considerar as limitações de largura de banda dos usuários móveis. As imagens tendem a ser um dos maiores recursos usados em uma página. A primeira coisa que você deve fazer é sempre garantir que suas imagens estejam bem comprimidas. Use a opção Save for web no seu editor de imagens, o que reduzirá muito o tamanho do arquivo da imagem, ou use outra ferramenta de compressão de imagens, como o TinyPNG. Você também deve garantir que elas não tenham uma resolução mais alta do que o necessário. Determinar o que “necessário” significa, no entanto, depende do tamanho da viewport. Você não precisa servir um arquivo tão grande para telas menores porque elas serão reduzidas de qualquer maneira.

Usando várias imagens para diferentes tamanhos de viewport

A melhor prática é criar algumas cópias de uma imagem, cada uma em uma resolução diferente. Se você souber, com base nas media queries, que a tela tem um certo tamanho, não faz sentido enviar uma imagem extremamente grande; o navegador terá que redimensioná-la para ajustá-la.

Usando srcset para servir a imagem correta

Media queries resolvem o problema quando a imagem é incluída via CSS, mas o que dizer das imagens adicionadas via tag <img> no HTML? Para imagens embutidas, uma abordagem diferente é necessária: o atributo srcset (abreviação de "source set"). Esse atributo é uma adição mais recente ao HTML. Ele permite que você especifique várias URLs de imagem para uma tag <img>, especificando a resolução de cada uma. O navegador então descobrirá qual imagem ele precisa e fará o download dessa.

<img alt="Uma xícara de café branca sobre uma cama de grãos de café"
     src="coffee-beans-small.jpg"
     srcset="coffee-beans-small.jpg 560w,
             coffee-beans-medium.jpg 800w,
             coffee-beans.jpg 1280w" />

Explicação:

• <img>: Esta é a tag que usamos para adicionar uma imagem na página.
• alt="Uma xícara de café branca sobre uma cama de grãos de café": Este é o texto alternativo. Se a imagem não aparecer por algum motivo, esse texto descreve a imagem.
• src="coffee-beans-small.jpg": Este é o caminho para a imagem padrão. É a imagem que o navegador mostra se não souber qual imagem usar do srcset.
• srcset="coffee-beans-small.jpg 560w, coffee-beans-medium.jpg 800w, coffee-beans.jpg 1280w":
• coffee-beans-small.jpg 560w: Quando a tela é pequena, o navegador usa essa imagem. 560w significa que essa imagem tem 560 pixels de largura.
• coffee-beans-medium.jpg 800w: Quando a tela é média, o navegador usa essa imagem. 800w significa que essa imagem tem 800 pixels de largura.
• coffee-beans.jpg 1280w: Quando a tela é grande, o navegador usa essa imagem. 1280w significa que essa imagem tem 1280 pixels de largura.

Em resumo:

Esse código mostra uma imagem diferente dependendo do tamanho da tela do dispositivo. Se a tela for pequena, usa a imagem menor; se for média, usa a imagem média; e se for grande, usa a imagem maior. Isso ajuda a carregar a imagem certa para cada tipo de tela, economizando dados e melhorando a aparência.

if you this content useful you can buy me a coffee:

https://buymeacoffee.com/santoscampj

or either through QR code