Responsive web design básico

• Defina a janela de visualização
• Tamanho do conteúdo para o visor
• Use CSS media queries para a capacidade de resposta
• Como escolher os pontos de interrupção
• modo de Exibição de mídia consulta de pontos de interrupção no Chrome DevTools

O uso de dispositivos móveis para navegar na web continua a crescer a um astronômicos ritmo, e estes dispositivos são normalmente é limitada pelo tamanho da tela e exigir uma abordagem diferente para a forma como o conteúdo é apresentado no ecrã.,

Web design responsivo, originalmente definido por Ethan Marcotte em uma lista separada, responde às necessidades dos usuários e os dispositivos que eles”estão usando. O layout muda com base no tamanho e capacidades do dispositivo. Por exemplo, em um telefone os usuários veriam o conteúdo mostrado em uma única coluna; um tablet pode mostrar o mesmo conteúdo em duas colunas.

Uma infinidade de diferentes tamanhos de tela existem através de celulares, “phablets,” tablets, computadores, consolas de jogos, TVs, e até mesmo vestuário., Os tamanhos de tela estão sempre mudando, por isso é importante que o seu site pode se adaptar a qualquer tamanho de tela, Hoje ou no futuro. Além disso, os dispositivos têm diferentes características com as quais interagimos com eles. Por exemplo, alguns dos seus visitantes estarão usando um touchscreen. Design responsivo moderno considera todas estas coisas para otimizar a experiência para todos.

define a janela #

as páginas optimizadas para uma variedade de dispositivos devem incluir uma meta viewport tag na cabeça do documento.Uma tag meta viewport dá ao navegador instruções sobre como controlar as dimensões e escala da página.,

na tentativa De proporcionar a melhor experiência, navegadores móveis renderthe página em um ambiente de trabalho largura de tela (geralmente, cerca de 980px, apesar de este variesacross dispositivos) e, em seguida, tentar fazer com que o conteúdo olhar melhor por increasingfont tamanhos e escala o conteúdo para caber na tela.Isso significa que o tamanho da fonte pode parecer inconsistente para os usuários,que podem ter que bater duas vezes ou beliscar-para-zoomin para ver e interagir com o conteúdo.,

Usando o valor do meta viewportwidth=device-width instrui a página para match the screen”largura em pixels independentes do dispositivo. Um pixel independente de dispositivo (ou densidade) é uma representação de um único pixel, que pode em uma tela de alta densidade consistir de muitos pixels físicos. Isso permite que a página reflowcontent corresponda a diferentes tamanhos de tela, seja renderizado em um pequeno mobilephone ou um grande monitor de desktop.,

algum browserskeep a constante de largura da página ao rodar para o paisagismo, e zoom em vez de refletir para preencher o ecrã., Adicionando o valorinitial-scale=1 instrui os navegadores para estabelecer uma relação de 1:1 entre CSSpixels e pixels independentes do dispositivo, independentemente da orientação do dispositivo, e permite que a página aproveite toda a largura da paisagem.

não tem <meta name="viewport"> tag width ou initial-scaleFarol de auditoria pode ajudar a automatizar o processo de certificar-se de que seus documentos HTML estiver usando a marca meta viewport corretamente.,

Garantir um acessíveis visor #

Em um initial-scale,você também pode definir os seguintes atributos do visor:

• minimum-scale
• maximum-scale
• user-scalable

Quando definido, estes podem desativar o usuário”s capacidade de zoom do visor,potencialmente, causar problemas de acessibilidade.Portanto, não recomendamos usar esses atributos.,

conteúdo de tamanho para a área de visualização #

tanto nos dispositivos desktop como nos dispositivos móveis, os utilizadores são usados para deslocar as páginas web verticalmente, mas não horizontalmente;forçar o utilizador a deslocar-se horizontalmente ou a ampliar outin para ver os resultados de toda a página numa má experiência do utilizador.

ao desenvolver um site móvel com uma meta viewport tag, é fácil criar acidentalmente conteúdo de página que ” não se encaixa perfeitamente dentro do viewport especificado.Por exemplo, uma imagem que é exibida em uma largura maior que a janela pode fazer com que a janela se desloque horizontalmente.,Você deve ajustar este conteúdo para caber dentro da largura do viewport, de modo que o Usuário não precisa deslocar horizontalmente.

O conteúdo não é dimensionado corretamente para a auditoria viewportLighthouse pode ajudá-lo a automatizar o processo de detecção de conteúdo transbordante.

imagens #

uma imagem tem dimensões fixas e se for maior do que a janela irá causar uma barra de posicionamento.Uma maneira comum de lidar com este problema é dar a todas as imagens um max-width de 100%.,Isto fará com que a imagem encolha para caber no espaço que tem,caso o tamanho da área de visualização seja menor que a imagem.No entanto, porque o max-width ao invés de width é 100%,a imagem não vai esticar maior que seu tamanho natural.É geralmente seguro, adicione o seguinte ao seu stylesheetso que você nunca vai ter um problema com as imagens, fazendo com que uma barra de rolagem.,

Adicionar as dimensões da imagem para o elemento img #

Ao usar max-width: 100% você está substituindo o natural dimensões da imagem,no entanto, você ainda deve usar o width e height atributos no seu <img> tag.Isto porque os navegadores modernos irão usar esta informação para reservar espaço para as imagens antes de serem carregadas,isto irá ajudar a evitar mudanças de layout como cargas de conteúdo.,

Layout #

Uma vez que as dimensões da tela e a largura em pixels CSS variam muito entre os dispositivos(por exemplo, entre telefones e tablets, e até mesmo entre diferentes telefones),o conteúdo não deve depender de uma determinada largura da janela para ficar bem.

no passado, estes elementos de configuração necessários para criar a disposição em percentages.In o exemplo abaixo, você pode ver uma disposição de duas colunas com elementos flutuados, dimensionados usando pixels.Uma vez que o viewport se torna menor que a largura total das colunas, temos que rolar horizontalmente para ver o conteúdo.,

Usando percentagens para as larguras, as colunas sempre permanecem uma certa percentagem do recipiente.Isto significa que as colunas se tornam mais estreitas, ao invés de criar uma barra de posicionamento.

técnicas modernas de layout CSS, tais como Flexbox, layout da grade e Multicolmake a criação destas grelhas flexíveis muito mais fácil.,

Flexbox #

Este layout método é ideal quando você tem um conjunto de itens de diferentes sizesand você gostaria de lhes caber confortavelmente em uma linha ou linhas,com pequenos itens de tomar menos espaço e maiores obtenção de mais espaço.

num desenho sensível, pode usar a Flexbox para mostrar os itens como uma única linha,ou embrulhado em várias linhas à medida que o espaço disponível diminui.

Leia mais sobre Flexbox.

disposição da grelha CSS #

disposição da grelha CSS permite a criação directa de grelhas flexíveis.,Se considerarmos o exemplo flutuado anterior, ao invés de criar nossas colunas com porcentagens,poderíamos usar o layout da grade e a unidade

, que representa uma parte do espaço disponível no recipiente.

Grade também pode ser usada para criar layouts regulares de grade,com todos os itens que caberem.O número de faixas disponíveis será reduzido como o tamanho da tela shrinks.In a demonstração abaixo, temos o número de cartões que cabem em cada linha,com um tamanho mínimo de 200px.,

Leia mais sobre a CSS de Layout de Grade

Vários-layout de coluna #

Para alguns tipos de layout que você pode usar de Várias Layout de coluna (Multicol),o que pode criar ágil números de colunas com o column-width propriedade.Na demonstração abaixo, você pode ver que as colunas são adicionadas, se há espaço para outro 200px coluna.,

Leia mais sobre Multicol

Usar CSS media queries para resposta #

às Vezes você vai precisar fazer mais alterações extensivas a seu layoutto suporte a um determinado tamanho de tela do que as técnicas apresentadas acima, vai permitir.É aqui que as consultas de mídia se tornam úteis.

As consultas multimédia são filtros simples que podem ser aplicados aos estilos CSS.,Eles facilitam a mudança de estilos com base nos tipos de dispositivo que rendem o conteúdo,ou as características desse dispositivo, por exemplo, largura, altura, orientação,capacidade de sobrevoar, e se o dispositivo está sendo usado como um touchscreen.,

Para fornecer estilos diferentes de impressão,você precisa para atingir um tipo de saída, de forma que você pode incluir uma folha de estilos com os estilos de impressão da seguinte forma:

como Alternativa, você pode incluir estilos de impressão dentro de seu principal, de folha de estilos, usando uma consulta de mídia:

para o design web responsivo, estamos tipicamente questionando as características do devicein a fim de fornecer um layout diferente para telas menores,ou quando detectamos que o nosso visitante está usando um touchscreen.

as pesquisas de mídia baseadas no tamanho do viewport #

as pesquisas de mídia nos permitem criar uma experiência sensível onde Estilos específicos são aplicados a telas pequenas, telas grandes, e em qualquer lugar no meio.O recurso que estamos detectando aqui é, portanto, Tamanho de tela, e podemos testar para as seguintes coisas.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

consultas de Mídia com base na capacidade do dispositivo #

, Dada a gama de dispositivos disponíveis, podemos fazer a suposição de que todos os grandes dispositivo é um regular desktopor computador portátil, ou que as pessoas estão apenas usando uma tela sensível ao toque em um pequeno dispositivo.,Com algumas adições mais recentes para a pesquisa de mídia específica podemos testar para características como o tipo de ponteiro usado para interagir com o Device e se o usuário pode pairar sobre os elementos.

• hover
• pointer
• any-hover
• any-pointer

Tente visualizar esta demonstração em diferentes dispositivos,como um ambiente de trabalho normal de computador e um telefone ou tablet.

estas características mais recentes têm um bom suporte em todos os navegadores modernos., Descubra mais nas páginas MDN forhover,any-hover,pointer, any-pointer.

Uso de any-hover e any-pointer #

características any-hover e any-pointer testar se o usuário tem o capabilityto passe, ou usar esse tipo de ponteiro, mesmo se ele não é a principal forma como eles estão interagindo com o seu dispositivo.Muito cuidado ao usar estes.Forçar um usuário a mudar para um mouse quando eles estão usando seu touchscreen não é muito amigável!,No entanto, any-hovere any-pointer pode ser útil se for importante descobrir que tipo de dispositivo um usuário tem.Por exemplo,um laptop com um touchscreen e trackpad deve corresponder ponteiros grosseiros e finos, além da capacidade de pairar.

como escolher os pontos de paragem #

não definir pontos de paragem com base nas classes de dispositivos.Definir breakpoints com base em dispositivos específicos, produtos,marcas ou sistemas operacionais que estão em uso hoje pode resultar em um pesadelo de manutenção.,Em vez disso, o conteúdo em si deve determinar como o layout se ajusta ao seu recipiente.

Escolha os pontos de paragem principais iniciando pequenos, depois trabalhando em #

Desenhe o conteúdo para caber em um pequeno tamanho de Tela primeiro, em seguida, expandir o ecrã até que um ponto de paragem se torne necessário.Isto permite otimizar os pontos de paragem com base no conteúdo e manter o menor número possível de pontos de paragem.Let ” s work through the example we saw at the beginning: the weather forecast.O primeiro passo é fazer a previsão parecer bom em uma tela pequena.,

Next, redimensione o navegador até que haja muito espaço em branco entre os elementos,e a previsão simplesmente”t parece tão boa.A decisão é um pouco subjetiva, mas acima de 600px é certamente muito ampla.

Para inserir um ponto de interrupção no 600px, criar duas consultas de mídia no final do seu CSS para o componente,para usar quando o navegador é 600px e para baixo, e uma para quando é maior que 600px.

finalmente, refactor a CSS. Inside the media query for a max-width of 600px,add the CSS which is only for small Teles., Inside the media query for amin-width of 601px add CSS for larger tells.

Escolha pontos de paragem menores quando necessário #

além de escolher pontos de paragem principais quando a disposição muda significativamente,também é útil ajustar para alterações menores.Por exemplo,entre os pontos de paragem Principais pode ser útil ajustar as margens ou estofar um elemento, ou aumentar o tamanho da fonte para que se sinta mais natural no layout.

Let”s start by optimizing the small screen layout.,Neste caso, vamos “aumentar o tipo de letra quando a largura da janela é maior que 360px.Em segundo lugar, quando há espaço suficiente, podemos separar as altas e baixas temperaturas para que elas ” estejam na mesma linha de cima umas das outras.E vamos também fazer os ícones meteorológicos um pouco maiores.

da mesma forma, para as telas grandes é melhor limitar a largura máxima da panela de previsão que”t consumir toda a largura da tela.,

Otimizar texto para leitura #

Clássico legibilidade teoria sugere que um ideal coluna deve conter entre 70 a 80 caracteres por linha(cerca de 8 a 10 palavras em inglês).Assim, cada vez que a largura de um bloco de texto cresce após cerca de 10 palavras,considere adicionar um ponto de paragem.

Let ” s take a deeper look at the above blog post example.Em telas menores, a fonte Roboto em: 1em funciona perfeitamente, dando de 10 palavras por linha,mas telas maiores exigem um ponto de interrupção.Neste caso, se o navegador a largura é maior que 575px, o conteúdo ideal de largura 550px.,

evite simplesmente esconder o conteúdo #

tenha cuidado ao escolher o conteúdo a esconder ou mostrar, dependendo do tamanho do ecrã.Não basta esconder o conteúdo Só porque você não pode caber na tela.O tamanho da tela não é uma indicação definitiva do que um usuário pode querer.Por exemplo, a eliminação da contagem de pólen das previsões meteorológicas pode constituir um problema grave para as pessoas que sofrem de alergias durante a primavera e que necessitam da informação para determinar se podem sair ou não.,

ver pontos de paragem da pesquisa multimédia nos DevTools Chrome #

Uma vez que tenha os seus pontos de paragem da pesquisa multimédia configurados,irá querer ver como o seu site fica com eles.Poderá dimensionar a janela do seu navegador para activar os pontos de paragem,mas o Chrome DevTools tem uma funcionalidade incorporada que torna fácil ver como uma página percorre diferentes pontos de paragem.

para ver a sua página sob diferentes pontos de paragem:

abrir DevToolsand depois ligar o modo do dispositivo.Isto abre no modo responsivo por padrão.

para ver as suas pesquisas multimédia, abra o menu Modo do dispositivo e seleccione a opção Mostrar os seus pontos de paragem como barras coloridas por cima da sua página.

carregue numa das barras para ver a sua página enquanto essa pesquisa multimédia estiver activa.,Carregue com o botão direito numa barra para saltar para a definição da consulta multimédia.última actualização: 14 de Maio de 2020 melhorar o artigo

---