Unidades de medidas no CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 46 Min 07 Seg Tempo restante da oferta: 02 46 07 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Unidades de medidas no CSS [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Unidades de medidas no CSS Nesse artigo você irá entender de fato a diferença entre as várias opções de unidades medidas do CSS, como Rem, Em, %, Px, entre outras. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/unidades_de_medidas_no_css.jpg) Unidades de medidas no CSS, para entender a diferença entre as muitas opções disponíveis, primeiramente precisamos ter o conhecimento que existem várias formas de se declarar medidas de fonte, no CSS, essas medidas se dividem em dois grupos: medidas absolutas e medidas relativas. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Unidades de medidas absolutas As medidas absolutas têm esse nome, pois elas não alteram o seu tamanho independente da largura da tela. Hoje em dia, é normal uma mesma página web ser acessada por dispositivos com telas de diferentes dimensões, como por exemplo, TVs, Tablets, monitores e celulares, justamente por esse fato as medidas absolutas no CSS não são recomendadas e sim medidas que se adequam às telas de diferentes dimensões, vamos ver alguns exemplos desses tipos de medidas. [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ### Cm(centímetro) Por mais que essa medida seja muito conhecida em países que utilizam o sistema métrico, como o do Brasil, o centímetro é uma unidade de medida muito mais utilizada no mundo real do que no desenvolvimento front-end, o uso dessa medida é inviável para se definir o tamanho de um texto ou título, pois 1cm pode ser muito grande para a tela de um celular. ### Pt(ponto) ou Pc(paica) Essas duas unidades de medidas são bem antigas, usadas para padronização do tamanho das fontes impressas em papel. Apesar de pouco utilizadas na criação de sites, elas são opções de unidades de medidas no CSS. - 1pt é equivalente a 1.66 pixels - 1pc é equivalente a 12 pontos. ### In(polegadas) A polegada leva essa nomenclatura de `in` por vir da palavra em inglês inches, que significa polegada. É uma medida usada nos EUA para medir objetos e distância. Ela também existe no CSS, porém como nos exemplos anteriores, é pouco utilizada. ## Unidades de medidas relativas. As medidas relativas, por outro lado, praticamente dominam as declarações de unidades de medidas no CSS, pois como o nome já diz essas medidas têm um comportamento diferente dependendo de algum fator previamente definido e também tem fácil adaptação a diferentes tamanhos de tela. Vamos ver alguns exemplos. [ ![Swift - Criação de aplicações móveis para IOS Básico](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/swift.svg) Curso Swift - Criação de aplicações móveis para IOS Básico Conhecer o curso ](https://www.treinaweb.com.br/curso/desenvolvimento-de-aplicacoes-ios-com-swift-basico) ### Rem O `rem` é uma das unidades de medida mais usadas no desenvolvimento front-end, porém nem todos entendem como essa medida funciona. Então, vamos entendê-la, 1rem é igual ao tamanho padrão da fonte da raiz(root) do documento, normalmente 16px, logo 1rem é igual à 16px. Se alterarmos a medida da fonte na raiz(root), alteramos o tamanho do `rem`, isso acontece com dispositivos de tamanho menores e maiores, pois 1px em um celular, por exemplo, é menor que 1px de uma televisão. Dessa forma nosso texto se torna mais adaptável a vários tamanhos de telas. ### Em Essa medida se comporta semelhante ao `rem`, a diferença dela é que 1em se baseia no tamanho do elemento pai de um parágrafo. Por exemplo, observe o código abaixo: ```html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, impedit laudantium officiis, illum aspernatur voluptatibus commodi voluptate, incidunt voluptatum a dignissimos et! Commodi beatae quas praesentium eos ullam aliquam maiores! ``` ```css .elemento-pai { font-size: 100px; } .texto{ font-size: 2em; } ``` Baseado na explicação acima, quantos px o parágrafo da classe texto terá? Exatamente, 200px. Pois, o elemento pai desse texto está definido previamente como 100px, logo, nesse caso, 1em terá 100px. ### Vw e Vh Para entender essas duas vamos ver primeiramente os seus significados. Vw, por exemplo, V = view, ou seja, a tela do seu navegador, e W = width, largura, portanto 100vw é 100%, em outras palavras, toda a largura visível do navegador. Seguindo a ideia o Vh é V = view, H = height que significa altura, então 100vh é toda altura visível do seu navegador. Portanto, por ser uma medida relativa, ela depende da altura(vh) ou largura(vw) visível do navegador para definir uma medida. ### Porcentagem (%) Essa unidade de medida é um dos tipos mais utilizados, quando trabalhamos com CSS. Isso porque, ela se adapta aos diferentes tamanhos de tela. O uso dessa unidade é feito da seguinte forma: quando declaramos que um elemento terá 100% de largura, estamos dizendo que esse mesmo elemento, tem a largura total do elemento que o envolve. Vamos ver um exemplo para ficar mais claro. ```html ... ``` Nesse caso, se o container tive uma largura de, por exemplo, `500px`, e, nosso `bloco` estiver com 100% de largura, o nosso `bloco` nesse caso terá `500px` de largura. Logo, medidas definidas em porcentagem(%), são baseadas na largura do elemento que a envolve. [ ![Java - Testes unitários com JUnit 5](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/java.svg) Curso Java - Testes unitários com JUnit 5 Conhecer o curso ](https://www.treinaweb.com.br/curso/java-testes-unitarios-com-junit-5) ## Conclusão Agora que está clara a diferença entre medidas absolutas e medidas relativas, facilita a compreensão de que, as medidas relativas são mais adaptáveis em comparação às absolutas. Facilitando nas criação de layouts que se adequam aos diferentes tipos de dispositivos. Saber essas diferenças entre as unidades de medidas no CSS é fundamental, principalmente no início dos estudos, pois criar uma base de conhecimento sólida nos dá vantagem lá na frente. Porém, caso queria saber mais ainda sobre os seletores CSS, temos um curso completo na plataforma, o [HTML5 + CSS3 - Propriedades e seletores avançados](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados "HTML5 + CSS3 - Propriedades e seletores avançados") - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #Unidades de medida ](https://www.treinaweb.com.br/blog/tag/unidades-de-medida) - [ #responsividade ](https://www.treinaweb.com.br/blog/tag/responsividade) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/07161700/gerenciamento-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 4 anos atrás ## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi) Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media queries, o que são e como usar no CSS? ](https://www.treinaweb.com.br/blog/media-queries-o-que-sao-e-como-usar-no-css) Neste artigo, nós iremos aprender sobre o uso de media queries no CSS e iremos aprender como utilizá-los em nossas aplicações web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout) Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ASCII-UNICODE-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Uma introdução a ASCII e Unicode ](https://www.treinaweb.com.br/blog/uma-introducao-a-ascii-e-unicode) Veja um pouco mais sobre os sistemas de codificação de caracteres ASCII e Unicode. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/bits-bytes-e-unidades-de-medida-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Bits, bytes e unidades de medida ](https://www.treinaweb.com.br/blog/bits-bytes-e-unidades-de-medida) Tudo o que fazemos em um computador é processado numa sequência de zeros e uns (sistema binário). Veja mais sobre bits, bytes e unidades de medida. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/TWELVE-FACTOR-APP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ O que são os 12 factor app? - Parte 3 ](https://www.treinaweb.com.br/blog/o-que-sao-os-12-factor-app-parte-3) Nesta terceira parte, iremos abordar mais três dos 12 princípios: port binding, concurrency e disposability. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/capa-programacao-defensiva-min-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 3 anos atrás ## [ Programação defensiva: uma estratégia para prevenção de erros ](https://www.treinaweb.com.br/blog/programacao-defensiva-uma-estrategia-para-prevencao-de-erros) Como proteger o código de possíveis erros? Confira neste artigo o que vem a ser a programação defensiva. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/TESTE-CAIXA-BRANCA-400x280.png) [ Testes e Projetos ](https://www.treinaweb.com.br/blog/categoria/testes-e-projetos) 6 anos atrás ## [ Principais técnicas de testes estruturais ](https://www.treinaweb.com.br/blog/principais-tecnicas-de-testes-estruturais) O teste estrutural pode ser considerado um dos mais importantes tipos de validação de software, tendo como resultado a diminuição no número de erros no sistema e, portanto, contribuindo com uma maior qualidade e confiabilidade. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **02h 46min 07s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58