Além de usar consultas de mídia e layouts CSS modernos, como flexbox e grade, para criar sites responsivos, existem certas coisas esquecidas que podemos fazer bem para criar sites responsivos. Neste artigo, examinaremos várias ferramentas (girando em torno de HTML e CSS) que temos disponíveis, desde imagens responsivas a funções CSS relativamente novas que funcionam naturalmente, quer usemos consultas de mídia ou não.
Na verdade, as consultas de mídia se tornam mais um complemento quando usadas com esses recursos, em vez da abordagem completa. Vamos ver como isso funciona.
Imagens verdadeiramente responsivas
Lembra quando podíamos apenas jogar as width: 100%imagens e encerrar o dia? Isso ainda funciona, é claro, e torna as imagens mole, mas há uma série de desvantagens que vêm com isso, a mais notável das quais inclui:
- A imagem pode ficar comprimida a ponto de perder seu ponto focal.
- Dispositivos menores ainda baixam a imagem em tamanho real.
Ao usar imagens na web, temos que nos certificar de que estão otimizadas em termos de resolução e tamanho. O motivo é garantir que temos a resolução de imagem certa para o dispositivo certo, para que não acabemos baixando imagens muito grandes e pesadas para telas menores, o que pode acabar reduzindo o desempenho de um site.
Em termos simples, estamos garantindo que imagens maiores e de alta resolução sejam enviadas para telas maiores, enquanto variações menores e de baixa resolução sejam enviadas para telas menores, melhorando o desempenho e a experiência do usuário.
O HTML oferece o <picture>elemento que nos permite especificar o recurso de imagem exato que será renderizado com base na consulta de mídia que adicionamos. Conforme descrito anteriormente, em vez de enviar uma imagem (geralmente uma versão grande de alta resolução) para todos os tamanhos de tela e dimensioná-la para a largura da janela de visualização, especificamos um conjunto de imagens para servir em situações específicas.
<picture>
<source media="(max-width:1000px)" srcset="picture-lg.png">
<source media="(max-width:600px)" srcset="picture-mid.png">
<source media="(max-width:400px)" srcset="picture-sm.png">
<img src="picture.png" alt="picture"">
</picture>Neste exemplo, picture.pngé a imagem em tamanho real. A partir daí, definimos a próxima maior versão da imagem picture-lg.png,, e o tamanho é reduzido em ordem decrescente até a menor versão picture-sm.png,. Observe que ainda estamos usando consultas de mídia nesta abordagem, mas é o <picture>próprio elemento que está conduzindo o comportamento responsivo, em vez de definir pontos de interrupção no CSS.
As consultas de mídia são adicionadas apropriadamente para escalar com os tamanhos da imagem:
- As janelas de visualização com 1000 px ou mais são obtidas
picture.png. - Viewports que estão entre 601 px e 999 px get
picture-lg.png. - Viewports que estão entre 401px e 600px get
picture-sm.png. - Qualquer coisa menor que 400 px é obtida
picture-sm.png.
Curiosamente, também podemos rotular cada imagem pela densidade da imagem – 1x, 2x, 3x e assim por diante – após o URL. Isso funciona se tivermos feito as diferentes imagens em proporção umas às outras (o que fizemos). Isso permite que o navegador determine qual versão baixar com base na densidade de pixels da tela, além do tamanho da janela de visualização. Mas observe quantas imagens acabamos definindo:
<picture>
<source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x">
<source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x">
<source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x">
<img src="picture.png" alt="picture"">
</picture>Vejamos especificamente as duas tags aninhadas dentro do <picture>elemento: <source> e <img>.
O navegador procurará o primeiro <source>elemento em que a consulta de mídia corresponda à largura da janela de visualização atual e, em seguida, exibirá a imagem apropriada (especificada no atributo srcset). O <img>elemento é necessário como o último filho do <picture>elemento, como uma opção de fallback se nenhuma das tags de origem inicial corresponder.
Também podemos usar a densidade da imagem para lidar com imagens responsivas apenas com o <img>elemento usando o srcsetatributo:
<img
srcset="
flower4x.png 4x,
flower3x.png 3x,
flower2x.png 2x,
flower1x.png 1x
"
src="flower-fallback.jpg"
>Outra coisa que podemos fazer é escrever consultas de mídia no CSS com base na resolução da tela (geralmente medida em pontos por polegada ou dpi) do próprio dispositivo e não apenas da janela de visualização do dispositivo. O que isso significa é que em vez de:
@media only screen and (max-width: 600px) {
/* Style stuff */
}Agora temos:
@media only screen and (min-resolution: 192dpi) {
/* Style stuff */
}Essa abordagem nos permite ditar qual imagem renderizar com base na resolução da tela do próprio dispositivo, o que pode ser útil ao lidar com imagens de alta resolução. Basicamente, isso significa que podemos exibir imagens de alta qualidade para telas que suportam resoluções maiores e versões menores em resoluções mais baixas. É importante notar que, embora os dispositivos móveis tenham telas pequenas, geralmente são de alta resolução. Isso significa que provavelmente não é a melhor ideia confiar apenas na resolução ao determinar qual imagem renderizar. Isso pode resultar na exibição de imagens grandes de alta resolução em telas muito pequenas, que pode não ser a versão que realmente queremos exibir em uma tela tão pequena.
body {
background-image : picture-md.png; /* the default image */
}
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png; /* higher resolution */
}
}O que <picture> nos dá é basicamente a capacidade de dirigir imagens artísticas. E, mantendo essa ideia, podemos aproveitar os recursos do CSS, como a object-fit propriedade que, quando usada com object-position, nos permite cortar imagens para obter melhores pontos focais, mantendo a proporção da imagem.
Portanto, para alterar o ponto focal de uma imagem:
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png;
object-fit: cover;
object-position: 100% 150%; /* moves focus toward the middle-right */
}
}Definição de valores mínimo e máximo em CSS
A min()função especifica o menor tamanho absoluto para o qual um elemento pode ser reduzido. Esta função é realmente útil em termos de ajudar os tamanhos de texto a serem dimensionados adequadamente em diferentes tamanhos de tela, como nunca deixar o tipo de fluido cair abaixo de um tamanho de fonte legível:
html {
font-size: min(1rem, 22px); /* Stays between 16px and 22px */
}min()aceita dois valores, e eles podem ser unidades relativas, percentuais ou fixas. Neste exemplo, estamos dizendo ao navegador para nunca permitir que um elemento com classe .boxfique abaixo de 45% da largura ou 600px, o que for menor com base na largura da janela de visualização:
.box {
width : min(45%, 600px)
}Se 45% for computado para um valor menor que 600 px, o navegador usará 45% como largura. Por outro lado, se 45% for computado para um valor maior que 600px, então 600px será usado para a largura do elemento.
O mesmo tipo de coisa vale para a max()função. Ele também aceita dois valores, mas em vez de especificar o menor tamanho para um elemento, estamos definindo o maior que ele pode obter.
.box {
width : max(60%, 600px)
}Se 60% for calculado para um valor maior que 600 px, o navegador usará 60% como largura. Por outro lado, se 60% computar para um valor menor que 600px, 600px será usado como a largura do elemento.
E, ei, podemos até definir um intervalo mínimo e máximo em vez de usar a minmax()função:
.box {
width : minmax( 600px, 50% ); /* at least 600px, but never more than 50% */
}Valores de fixação
Muitos de nós já clamamos há clamp()algum tempo e, na verdade, temos amplo suporte para todos os navegadores modernos (desculpe, Internet Explorer). clamp()é a combinação das funções min()e max(), aceitando três parâmetros:
- o valor mínimo,
- o valor preferido, e
- o valor máximo
Por exemplo:
.box {
font-size : clamp(1rem, 40px, 4rem)
}O navegador definirá a fonte em 1rem até que o valor calculado de 1rem seja maior que 40px. E quando o valor calculado está acima de 40px? Sim, o navegador irá parar de aumentar o tamanho após atingir o 4rem. Você pode ver como clamp () pode ser usado para tornar os elementos fluidos sem chegar às consultas de mídia.
Trabalhando com unidades responsivas
Você já construiu uma página com um título ou subtítulo grande e admirou como ficou ótima em uma tela de desktop, apenas para verificar em um dispositivo móvel e descobrir que é muito grande? Definitivamente, estive nesta situação e nesta seção explicarei como lidar com esses problemas.
Em CSS, é possível determinar os tamanhos ou comprimentos de elementos usando várias unidades de medida, e as unidades mais utilizados de medições inclui: px, em, rem, %, vw, e vh. Embora, existam várias outras unidades que não são usadas com freqüência. O que nos interessa é que pxpode ser considerada uma unidade absoluta, enquanto o resto são consideradas unidades relativas.
Unidades absolutas
Um pixel ( px) é considerado uma unidade absoluta principalmente porque é fixo e não muda com base na medição de qualquer outro elemento. Pode ser considerada como a unidade base, ou raiz, que algumas outras unidades relativas usam. Tentar usar pixels para comportamento responsivo pode gerar problemas porque foi corrigido, mas eles são ótimos se você tiver elementos que não devem ser redimensionados.
Unidades relativas
As unidades relativas, como %, eme rem, são mais adequadas ao design responsivo principalmente por causa de sua capacidade de escalar em diferentes tamanhos de tela.
vw: Relativo à largura da janela de visualizaçãovh: Relativo à altura da janela de visualizaçãorem: Relativo ao <html>elemento raiz ( ) (o tamanho da fonte padrão é geralmente 16px)em: Relativo ao elemento pai%: Relativo ao elemento pai
Novamente, o tamanho da fonte padrão para a maioria dos navegadores é 16pxe e isso é o que as remunidades usam para gerar seus valores calculados. Portanto, se um usuário ajustar o tamanho da fonte no navegador, tudo na página será dimensionado corretamente, dependendo do tamanho da raiz. Por exemplo, ao lidar com um conjunto de raiz em 16px, o número que você especificar multiplicará esse número pelo tamanho padrão. Por exemplo:
.8rem = 12.8px (.8 * 16)
1rem = 16px (1 * 16)
2rem = 32px (2 * 16)E se você ou o usuário alterar o tamanho padrão? Como já dissemos, essas são unidades relativas e os valores do tamanho final serão baseados no novo tamanho de base. Isso se mostra útil em consultas de mídia, onde você apenas altera o tamanho da fonte e a página inteira aumenta ou diminui de acordo.
Por exemplo, se você alterou o tamanho da fonte para 10pxdentro do CSS, os tamanhos calculados acabariam sendo:
html {
font-size : 10px;
}1rem = 10px (1 * 10)
2rem = 20px (2 * 10)
.5rem = 5px (.5 * 10)Nota: Isso também se aplica à porcentagem %. Por exemplo:
100% = 16px;
200% = 32px;
50% = 8px;E qual é a diferença entre unidades reme em? É o que a unidade usa como elemento base. remcalcula valores usando o tamanho da fonte do <html>elemento root ( ), enquanto um elemento que declara emvalores faz referência ao tamanho da fonte do elemento pai que o contém. Se o tamanho do elemento pai especificado for diferente do elemento raiz (por exemplo, os elementos pai são 18px, mas o elemento raiz é 16px), então eme remserá resolvido para diferentes valores calculados. Isso nos dá um controle mais refinado de como nossos elementos respondem em diferentes contextos responsivos.
vhé um acrônimo para altura da janela de visualização ou a altura da tela visível. 100vhrepresentam 100% da altura da janela de visualização ( dependendo do dispositivo ). Na mesma linha, vwsignifica largura da janela de visualização , significando a largura da tela visível do dispositivo e 100vwrepresenta literalmente 100% da largura da janela de visualização.
Indo além das consultas de mídia
Veja isso? Acabamos de olhar para uma série de recursos HTML e CSS realmente poderosos e relativamente novos que nos fornecem maneiras adicionais (e possivelmente mais eficazes) de criar capacidade de resposta. Não é que essas novas técnicas substituam o que temos feito o tempo todo. Eles são apenas mais ferramentas em nosso cinturão de ferramentas de desenvolvedor que nos dão maior controle para determinar como os elementos se comportam em diferentes contextos. Quer esteja trabalhando com tamanhos de fontes, resoluções, larguras, pontos focais ou qualquer outra coisa, temos um controle mais preciso da experiência do usuário do que nunca.
Então, da próxima vez que você estiver trabalhando em um projeto em que deseja ter mais controle sobre a aparência exata do design em dispositivos específicos, verifique o que HTML e CSS nativos podem fazer para ajudar – é incrível como as coisas avançaram ao longo.