Uma das primeiras coisas que aprendemos quando começamos a estudar desenvolvimento Web, são os conceitos de CSS e dentro dessa área, as medidas que vamos usar nos nossos projetos. Quando paramos para pensar nisso, é normal que surjam dúvidas? Afinal de contas qual é a melhor escolha para quem só tinha ouvido falar de pixel até então?
Como devorador de vídeos, tutoriais, entre outros, os instrutores sempre variavam nas medidas, uns usavam pixel, outros rem, e alguns raros falavam de em. Logo fiquei sem saber qual usar quando decidi fazer meus projetos pessoais. Então, para ajudar aqueles que também estão passando por esse problema, decidi passar algumas dicas.
Primeiro, o que é pixel?
A primeira coisa que precisamos saber é que o pixel que usamos em desenvolvimento web não é a mesma coisa que o pixel físico. No CSS, o pixel é uma referência que mede o tamanho de um pixel em uma tela de 96dpi. Quando usamos essa medida em um projeto, o valor determinado é reescalonado para sua unidade de referência.
Agora vamos falar sobre REM
Não, não estamos falando da saudosa banda REM. Aqui vamos tratar sobre uma unidade relativa e escalável de medida que varia de acordo com seu valor determinado no Root(raíz) do seu projeto. Geralmente definimos o valor REM como sendo o equivalente a 62.5% do tamanho de um pixel. Dessa forma se o tamanho do pixel for definido como 16px, essa mesma medida transformada para rem será igual 1rem. Logo temos 1rem = 10px.
Mas por quê usar o rem? Por padrão, a fonte raiz dos navegadores vem estipulados como 16px. Quando formos redimensionar essa fonte, se ela não estiver como Rem, vai ficar distorcida se aumentada. Quando usamos a medida rem, essa fonte será redimensionada de maneira adequada.
E o EM?
o em também é uma unidade dinâmica, mas a sua referência não vai ser o valor estipulado na raíz do seu navegador. Ele vai tomar como referência o font-size do elemento no qual ele é utilizado. Um exemplo simples é se utilizarmos um elemento com font-size de 1rem(o que seria 16px de acordo com o valor padrão do root). Ao utilizarmos no elemento filho algo com a fonte 1em, ele manterá o valor de 16px, já que está referenciando o pai.
Certo, mas e quando devo usar cada um?
Nada melhor do que saber quando usar cada medida, depois que entendemos cada uma delas. E aqui vai algumas dicas:
Pixel: A melhor maneira, seria utilizar em ajustes finos, partes que não seriam alteradas ao serem reescalonadas. Dessa forma quando alterado o root do seu navegador seu layout continuará perfeito.
Rem: Essa medida geralmente é usada no projeto inteiro, porque ela é ótima para mantê-lo acessível e adaptável. Existem inúmeras ferramentas que ajudam a fazer a conversão de pixel para rem, mas em resumo a melhor maneira é fazer o cálculo que o rem é 62.5% da fonte padrão de um pixel. Logo: 1rem/10px; 2rem/20px; 4.5rem/45px e assim por diante.
Em: Para se utilizar em preenchimentos, alturas de linhas e margens é uma ótima alternativa.
Vimos quais as diferenças entre as medidas e quando utilizarmos cada uma delas. Mas a melhor maneira de sabermos é praticando. Tente utilizar as 3 medidas no mesmo projeto, variando entre elas e veja como se comportam. Aproveite para deixar aqui nos comentários qual você mais gosta e como elas melhor se encaixam nos seus projetos.
Top comments (0)