Pixel físico e pixel CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 48 Min 56 Seg Tempo restante da oferta: 15 48 56 [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) Pixel físico e pixel CSS [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Pixel físico 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. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css.jpg) Pixel físico e pixel CSS é algo muito fácil de se confundir. Muitas pessoas não sabem nem que existe essa diferença, tão pouco, o porquê. Para entender como esse sistema de padronização de unidade de medida funciona, precisamos entender alguns conceitos importantes. Nesse artigo vamos entender esses conceitos e como esse padrão funciona. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Pixel físico O pixel é o menor ponto de uma tela, seja ela, celular, monitores ou, até mesmo, televisores. Todos esses dispositivos possuem milhares de pixels. Esses pequenos pontos, são iluminados de forma independente uns dos outros. Porém, trabalham de forma harmoniosa para gerar as imagens que podemos ver. Eles, fisicamente, ocupam um certo espaço. Por menor que possam ser, eles possuem altura e largura. Entretanto, essa medida ainda não é a medida que usamos no desenvolvimento de páginas. Mas fique tranquilo, pois, ao final, você saberá exatamente o que é o pixel que declaramos no CSS. [ ![HTML5 + CSS3 - Apresentação de Dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados) ### Resolução de tela Bom, sabemos de fato o que é um pixel físico. Sabemos, também, que uma tela, qualquer que seja ela, possui milhares de pixels. Porém, quantos exatamente? A quantidade de pixels de uma tela é o que define sua resolução. Para tela poder ser considerada HD, Full HD, 4K ou, qualquer outra definição, ela é obrigada a ter uma certa quantidade de pixel em seu dispositivo. Por exemplo, um monitor HD, precisa ter, no mínimo, 1280 pixels de largura, e 720 pixels e altura. Telas 4K são a partir de 3840 pixels de largura e 2160 pixels de altura. Ou seja, quanto maior a quantidade de pixel, maior a resolução. Quanto maior a resolução, mais nítidas, mais detalhadas e menos distorcidas as imagens ficam para nossos olhos. Vou deixar uma tabela de pixels para melhor compreensão logo abaixo: ![Tabela de Resolução das telas](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/tabela_de_resolucao_de_telas.png) Estabelecemos, o conceito de resolução. Agora, vamos entender o que é densidade de pixels. ### Densidade de pixel Densidade de pixel é a quantidade de pixel que cabem dentro de uma polegada da tela. Essa densidade, possui um termo técnico. `PPI`, uma abreviação para `pixel per inch`, que, em português, significa, pixel por polegada. A ideia aqui é a mesma, quanto maior o PPI de uma tela, maior a qualidade da imagem. Portanto, se soubermos o tamanho de um dispositivo, em polegadas, e, se tivermos acesso à resolução desse dispositivo, podemos fazer um cálculo para descobrir o `PPI` de qualquer tela. Vamos a um exemplo. Vou pegar o Samsung S21, ele possui um tamanho de 6,2 polegadas. De resolução, 1080 pixels de largura e 2400 pixels de altura. Para fazer essa conta, usaremos uma fórmula para calcular os pixels de um canto ao outro. O cálculo é encontrar a raiz quadrada de largura x largura somada com altura x altura, representada dessa forma, raiz quadrada de \[(1080 x 1080) + (2400 x 2400)\], o resultado dessa operação é 6.926.400. E, a raiz quadrada desse número é 2631,81. Se dividir esse número pela polegada do aparelho encontraremos, 424,48, que é exatamente a densidade, ou, `PPI` desse telefone. Certamente, chegamos a um ponto, que estamos com um ótimo entendimento sobre os pixels físicos de um dispositivo. Contudo, ainda não sabemos o que são os pixels CSS. Vamos entendê-los agora. [ ![HTML5 + CSS3 - Dominando o CSS Grid Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout) ## Pixel CSS O pixel CSS, aquele que, de fato, é equivalente à largura das telas. É dado pelo `DPR`, `device pixel ratio`, que em português é, proporção de pixels do dispositivo. Para simplificar, o `DPR` é uma forma que o CSS encontrou de padronizar os pixels de um dispositivo para podermos criar um layout agradável e proporcional em várias telas com PPIs diferentes. ![Device Pixel Ratio](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/device_pixel_radio.png) Cada modelo de tela trabalha com seu DPR, seja ele 1, 2 ou 3. Baseado na imagem a cima, podemos entender, que, um dispositivo que utiliza uma proporção 3 no `DPR`, na verdade, cada 9 pixels físicos da tela, consiste em 1 pixel CSS. Assim, um iPhone 12, por exemplo, que tem 1170pixels de largura e 2532 pixels de altura, e utiliza um `DPR` de 3. Para o CSS, ele tem 390 pixels de largura e 844 pixels de altura. [ ![HTML5 + CSS3 - Dominando o Flexbox](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox) ### Conclusão Em conclusão, podemos entender, que, a medida do pixel que trabalhamos no CSS tende, de certa forma, a se adaptar aos diversos dispositivos. Mesmo com uma certa variação entre uns e outros, ela sempre irá tentar manter o padrão através do `DPR`. Em contrapartida, o pixel físico, sempre irá se manter em constante mudança, acompanhando os avanços tecnológicos. Já que as empresas sempre buscam o melhor produto, visando se manter competitivos no mercado. - [ #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) 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/11/A-importancia-das-metatag-no-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ A importância das metatags no HTML ](https://www.treinaweb.com.br/blog/a-importancia-das-metatags-no-html) Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos dar bastante atenção para essas tags. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/05/06062246/pixelart-softwares-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ Ferramentas para Pixel Art ](https://www.treinaweb.com.br/blog/ferramentas-para-pixel-art) Conheça as melhores ferramentas desktop, web ou mobile para se trabalhar com Pixel Art. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/14130702/0-400x280.png) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 8 anos atrás ## [ O que são Imagens Vetoriais? ](https://www.treinaweb.com.br/blog/o-que-sao-imagens-vetoriais) Veja o que são imagens vetoriais e sua diferença com imagens rasterizadas (bitmap). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/como-construir-um-layout-flutter-responsivo) Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/Conhecendo_o_box_model-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Conhecendo o box model ](https://www.treinaweb.com.br/blog/conhecendo-o-box-model) Domine os fundamentos do CSS com o box model. Aprenda a controlar o layout e o espaçamento dos elementos para uma página da Web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/unidades_de_medidas_no_css-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Unidades de medidas no CSS ](https://www.treinaweb.com.br/blog/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. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/17132411/middlewares-aspnet-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Compreendendo os middlewares no ASP.NET Core ](https://www.treinaweb.com.br/blog/compreendendo-os-middlewares-no-asp-net-core) Veja como os middlewares funcionam em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/03160827/NANCY-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ Criando uma API RESTful com o NancyFx e .NET Core ](https://www.treinaweb.com.br/blog/criando-uma-api-restful-com-o-nancyfx-e-net-core) O NancyFX é um leve framework para o C#. Veja como utilizá-lo para criar uma API RESTful. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/14131229/HEALTH-CHECKS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Verificando a integridade da aplicação ASP.NET Core com Health Checks ](https://www.treinaweb.com.br/blog/verificando-a-integridade-da-aplicacao-asp-net-core-com-health-checks) Verificar e monitorar a integridade de uma aplicação web é algo essencial, principalmente em ambientes distribuídos. O ASP.NET Core facilita esta tarefa através de Health Checks, como você verá neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/15113107/BITBUCKET-400x280.png) [ Controle de versão ](https://www.treinaweb.com.br/blog/categoria/controle-de-versao) 7 anos atrás ## [ Criando repositório no BitBucket ](https://www.treinaweb.com.br/blog/criando-repositorio-no-bitbucket) Veja neste artigo como criar repositório no BitBucket. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/01172547/NET-CORE-3-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ .NET Core 3.0 - Criando tarefas de segundo plano com Worker Service ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-tarefas-de-segundo-plano-com-worker-service) Você já quis criar tarefas em segundo plano com o .NET Core? Na versão 3.0 foi introduzido o template Worker Service que facilita a criação deste tipo de aplicação. Caso tenha passado por uma situação assim, neste artigo mostramos como você pode aproveitar este novo recurso do .NET Core 3.0. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Aplicações em tempo real com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr) Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. 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 **15h 48min 56s** - 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