Utilização de VW e VH como unidade de medida padrão como técnica de responsividade.

[victorscher]

Primeiro um pouco de contexto: Eu trabalho em uma agência de marketing e como alguns devem saber os prazos de entrega costumam ser curtos e os produtos costumam ser efêmeros. Assim que entrei (1 ano atrás) eu era bastante júnior, sabia o básico de HTML, CSS e JavaScript, minha grande dificuldade no início era a responsividade, o problema não era adaptar do mobile para desktop ou vice e versa, era os breakpoints de resolução ex. desktop: 4K, 1920x1080, 1366x860, como no início eu utilizava px, em ou rem, eu precisava fazer um Media Query pra cada resolução das telas mais comuns, mesmo que elas mantivessem o mesmo aspect ratio, e isso levava muito tempo, até que descobri a vw e a vh e percebi que se eu utilizasse essas unidades de medida como padrão inclusive em font-size, só precisaria criar os criar Media Queries quando o aspect ratio da tela mudasse, ou seja 3 break points: Mobile, Tablet, Desk, desde então venho utilizando essa técnica nos meus projetos, e posso dizer que tem funcionado bem, com algumas ressalvas.

A técnica que eu sigo é bem simples, vw para definir larguras e font-size, vh pra definir alturas e % em situações específicas, muito raramente px pra fazer alguma gambiara 😂

Quero deixar claro que não estou propondo essa técnica como uma maneira correta e absoluta de se fazer responsividade, estou aqui justamente levantando essa discussão afim entender a partir de diferentes pontos de vistas as vantagens e desvantagens e principalmente aprimorar a forma como eu lido com responsividade no meu dia a dia, então queria saber o que vocês acham dessa técnica? Como utilizam o vw e o vh no dia a dia? Como fazem a responsividade de textos? E o que mais queiram falar que esteja dentro do escopo de responsividade.

Vou deixar os links de alguns trabalhos feitos utilizando vw e vh como unidade de medida padrão em todos os elementos pra vocês avaliarem o funcionamento disso.

https://ctrlbrand.com.br
https://greatlaunches.ffwd.rocks
https://aurea50.com.br

[ninetails]

Não curto muito depender do viewport para espaçamentos ou tamanho de texto. Pessoalmente curto fixar um tamanho de fonte e utilizar em/rem, dependendo da situação. Pra facilitar, geralmente uso uma calculadora de mixin (que basicamente só divide o tamanho que quero pela fonte corrente do contexto).

Mas tem uma parada que eu vi o Felipe Fialho postando no LinkedIn (não quero importuná-lo então não arrobarei xD) sobre o clamp(). Não rola no IE mas acho que deve rolar um fallback maroto utilizando min/max.