Unidades de medida em CSS

As unidades de medida em CSS são essenciais para definir o tamanho e a proporção dos elementos em uma página web. Existem diversas unidades de medida que podem ser utilizadas, cada uma com suas particularidades e aplicações específicas.

Unidades de medida absolutas

As unidades de medida absolutas são fixas e não se alteram em relação ao tamanho da tela ou do dispositivo utilizado para acessar a página. Entre as unidades de medida absolutas mais comuns estão:

• px: é a unidade de medida mais utilizada em CSS. Cada pixel representa um ponto na tela e é uma medida absoluta, ou seja, não se altera em relação ao tamanho da tela ou do dispositivo;
• pt: é uma unidade de medida utilizada principalmente para impressão. Cada ponto representa 1/72 de uma polegada;
• in: é uma unidade de medida que representa uma polegada. É pouco utilizada em web design, mas pode ser útil em projetos de impressão.

Unidades de medida relativas

As unidades de medida relativas são proporcionais ao tamanho da tela ou do elemento pai. Isso significa que elas se adaptam às diferentes resoluções e tamanhos de tela, tornando a página mais responsiva e adaptável. Entre as unidades de medida relativas mais comuns estão:

• %: representa a porcentagem do tamanho do elemento pai. Por exemplo, se um elemento pai tem 500px de largura e um filho tem width: 50%, ele terá 250px de largura;
• em: é uma unidade de medida que se baseia no tamanho da fonte do elemento pai. Por exemplo, se o tamanho da fonte do elemento pai é 16px e um filho tem font-size: 1em, ele terá 16px de tamanho de fonte;
• rem: é uma unidade de medida que se baseia no tamanho da fonte do elemento raiz (normalmente o elemento html). Por exemplo, se o tamanho da fonte do elemento raiz é 16px e um filho tem font-size: 1rem, ele terá 16px de tamanho de fonte;
• vw e vh: representam a porcentagem da largura (vw) ou altura (vh) da tela. Por exemplo, se a largura da tela é 1000px e um elemento tem width: 50vw, ele terá 500px de largura.

É importante entender as diferenças entre as unidades de medida absolutas e relativas e escolher a que melhor se adapta às necessidades do projeto. Além disso, é importante lembrar que o uso excessivo de unidades de medida absolutas pode tornar a página menos responsiva e adaptável, enquanto o uso excessivo de unidades de medida relativas pode tornar a página instável e imprevisível.

Próxima página do Ebook Gratuito:

6Box Model em CSS

3 minutos