Pixels vs.Pontos em HTML/CSS
https://stackoverflow.com/questions/6389914
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Ao criar uma página HTML, devo especificar coisas como margins com pixels ou com pontos em CSS?
Um deles é considerado uma prática melhor do que o outro?Alguma vantagem ou desvantagem para qualquer um deles?
Solução
Usar px ou em
Pontos (pt): Os pontos são tradicionalmente usados na mídia impressa (qualquer coisa que deva ser impressa em papel, etc.).Um ponto é igual a 1/72 de polegada.Os pontos são muito parecidos com os pixels, pois são unidades de tamanho fixo e não podem ser dimensionados em tamanho.
Geralmente, 1em = 12pt = 16px = 100%.
[Conclusão]
O vencedor: por cento (%).
- Nota de JohnB: isso é para TEXTO. Obviamente, você perguntou sobre "coisas como margens". (Presumo que você quer dizer
paddingtambém.) Para isso, eu recomendariapxouem.Pessoalmente, eu mudo, dependendo da situação específica.
MAIS ARTIGOS
Os valores dos pontos são apenas para impressão CSS!
(Comente mais abaixo)
Os pontos são para impressão?Não.
Os pontos não são exclusivamente para impressão.Teoricamente, os pontos servem para definir uma medida absoluta.Os pixels não são absolutos, pois dependendo da sua tela e da definição escolhida (não da resolução), a resolução (pixels por polegada) pode ir de muito (150dpi) ou muito pouca (75dpi).O que significa que seus pixels podem ter um tamanho ou talvez metade desse tamanho.O que significa que o texto que você projeta para ser perfeitamente legível na tela pode parecer muito grande na tela do seu cliente (“por favor, diminua o texto, ok?”) ou muito pequeno para ser legível na tela do seu vizinho (“ei, o site que você me contou sobre outro dia?aquele em que você disse que tinha trabalhado... bom, não consegui ler muito bem o texto, é tão pequeno”).
Os pontos são uma solução para esse problema.Mas os navegadores e os sistemas operacionais precisam gerenciá-los.Basicamente, significa:
os navegadores precisam calcular o tamanho da exibição em pixels usando o valor fornecido (digamos, 10pt) e a resolução real da tela;os sistemas operacionais precisam comunicar a resolução atual real e não um valor padrão.
Também:
Outras dicas
As regras básicas são:
Pixels para exibição na tela; pontos para impressão.
'em' ou '%' (e o rem menos conhecido) são melhores para um layout mais flexível.
em é uma unidade de medida baseada no tamanho da letra 'm' na fonte atual. Especificar tamanhos no em permite que você tenha um tamanho baseado no tamanho da fonte, o que significa que você pode alterar a fonte e o layout mudará para acompanhar.
Mas muitas vezes você precisa usar um tamanho fixo. Nesse caso, px geralmente é o melhor, pois a maioria das páginas da web é exibida em uma tela baseada em pixels. Mas se você está planejando ter uma página que é muito impressa, você pode ter uma folha de estilo específica para impressão com um layout baseado em pontos.
Geralmente, eu recomendo em em vez de px ou pt. Se você estiver usando px, é porque você tem elementos em sua página que são dimensionados em pixels, como imagens, aos quais você precisa que o resto do layout se adapte. Neste caso, como as imagens estão em pixels, as folhas de estilo também devem. Além disso, como os pontos são uma unidade de medida de impressão, não há garantia de como eles aparecerão na tela: o px é baseado na tela, então lhe dará uma aparência muito mais consistente na tela em diferentes navegadores e plataformas.
A propósito, esta página pode fornecer mais informações: http: / /webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
As pontas são ótimas, pois têm 1/72 polegada de altura.Você sabe qual será a altura do seu texto.O problema com os pixels é que eles ficam menores quanto maior a resolução. Os pixels são ótimos se você deseja envolver o texto em uma imagem de fundo.Dá algum trabalho, mas pode criar uma página bonita.Ouvi dizer que os pixels não são redimensionáveis no IE - portanto, se quiserem aumentar o tamanho da fonte, não poderão.Não use o IE, então não posso dizer.Lembre-se de ouvir isso.Os EM deixam você à mercê de como a pessoa definiu os tamanhos de fonte em seu navegador.Ems e porcentagens facilitam isso.Eu sempre uso pontos.
[...]
Não, os pontos não são os melhores.Para quem encontrar este tópico, esqueça que você já leu isso.Este é um fórum de web design.Para exibir páginas em mídia de tela. Os pontos são incluídos no CSS exclusivamente para fins de design de impressão.Para folhas de estilo de mídia impressa. Eles não são escaláveis como% e ems são.Se você é algum tipo de web designer, deve trabalhar para tornar suas páginas acessíveis e usar pontos é um golpe contra isso desde o início.
http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html
É engraçado, todo mundo responde "pixel ou %/em" e não "pixel ou pontos".
Eu não sabia que havia diferença entre os dois.
Editar: ainda mais informações...oficiais!
Não especifique o tamanho da fonte em pt, ou outras unidades de comprimento absoluto para folhas de estilo de tela.Eles são renderizados de forma inconsistente entre plataformas e não podem ser redimensionados pelo User Agent (por exemplo, navegador). Mantenha o uso de tais unidades para estilização em mídia com propriedades físicas fixas e conhecidas (por exemplo, impressão).
Qualquer pessoa que diga para você usar pixels está errada . Pixels funcionam bem, mas simplesmente não são necessários ... Nunca! Os pontos são uma forma perfeitamente adequada de especificar uma medida absoluta e, para a escala em que estamos comumente trabalhando na web, eles são mais frequentemente do que a medida preferida.
Ao lado dos pontos, também há pica, polegada, centímetro e assim por diante. Escolher um desses em vez do outro é como dizer: "devo medir esta sala em pés ou polegadas?" Deixe o bom senso ser seu guia. Todos farão o trabalho.
Em, que apareceu em algumas das respostas, deve ser reservado para quando for apropriado. Isso quer dizer, "quando essa coisa crescer, eu quero que essa outra coisa dimensione". É para isso que servem as medidas relativas. Sei que isso está além do escopo de sua pergunta original, mas tive que resolver algumas das bobagens sobre "sempre usá-los".
BTW, pixels não são iguais a pixels físicos. Hoje, px em uma folha de estilo significa 1/96 de polegada. É por isso que digo para não usá-los. A maioria das pessoas não sabe disso. Eles os usam pensando que estão especificando pixels reais. Eu não posso levar essas pessoas a sério com isso sendo aparente (embora eu não culpe as pessoas, eu culpo a natureza confusa do estado das coisas, é por isso que faço campanha para que os pixels desapareçam). Além disso, se pixels realmente significassem pixels, eles seriam uma maneira horrível de especificar as dimensões. Fale sobre o fato de que as coisas encolheriam e aumentariam aleatoriamente com base em resoluções de tela arbitrárias incontroláveis. Caramba! Fique longe de pixels !!! Na prática, eles funcionam, mas apenas devido à falsificação de esforços invisíveis por parte dos fabricantes de navegadores e do pessoal do sistema operacional. Em teoria, eles são uma forma terrivelmente ambígua de especificar suas intenções.
A resposta de João B acima é a melhor e mais precisa. Eu só queria apontar uma possível confusão criada pela resposta acima da dele. Um "em" na tipografia é a largura da letra "m" na fonte que você escolheu. Para especificar a altura de uma fonte, os impressores / compositores usaram a "altura x", que é a altura da letra x minúscula.
Como John aponta, os pt's são uma unidade fixa de medida igual a 1/72 de polegada. Como os monitores têm densidades de pixel variadas (72 / polegada, 96 / polegada ...), geralmente não é uma boa maneira de dimensionar as coisas em documentos HTML.
O em se relaciona diretamente com a unidade de tipografia antiga e é uma excelente medida relativa. Conforme o tamanho da tela é dimensionado, os tamanhos da fonte também são reduzidos. Se você usar ems para as margens, eles serão redimensionados em relação ao tamanho da fonte, o que geralmente é bom.
Mas, para margens, preenchimento e todas as coisas não diretamente relacionadas às fontes, é melhor usar rem's ou "ems relativos". A melhor maneira de fazer isso é declarar um tamanho de fonte padrão para seu corpo ou tag html inicialmente. Algo como body font-size= 16px é um bom lugar para começar. Em seguida, em todas as outras partes do documento, use em's para texto e rem's para todo o resto. Ou use porcentagens. Qualquer um vai funcionar bem. Como em's e rem's, sua% é relativa ao tamanho da fonte original de 16 px= 100%.
Tudo no documento será dimensionado em relação à configuração inicial para o tamanho da fonte 100% em 16px. Dessa forma, você só usa uma medida de pixel uma vez no documento. Isso é útil se você quiser definir consultas de mídia para ajustar seus tamanhos e margens para acomodar diferentes densidades de pixel em diferentes monitores de dispositivo. Você só precisa ter consultas para aquela declaração inicial na tag do corpo. Todo o resto se ajustará em relação a isso e não precisará ser alterado.
apenas um pensamento, maxw3st
Acho que depende do que você está tentando fazer.
Acho que a questão principal é: a distância precisa ser redimensionada com a janela?Algumas unidades são relativas, outras (como pixels e pontos) não - uma breve descrição é aqui .
Não tenho visto muitos pontos usados, px parece mais comum quando uma medição absoluta é necessária.
Pixels é mais estético para mim e acredito que seja considerado uma prática melhor ...
A resposta é: depende.Para que você está usando suas margens?Eles são parte integrante de um layout balanceado e redimensionável ou apenas fornecem uma sarjeta nas bordas?As porcentagens funcionam melhor no primeiro caso, e os pixels funcionam bem no segundo.
Você deve experimentar as diferentes possibilidades e determinar qual funciona melhor para o seu documento.Como não há "certo e errado" neste caso, você pode escolher a resposta que funciona melhor para você.
Eu uso pixels para quase tudo.
Para mim, "parece" que tenho um controle mais preciso.
Para as poucas coisas que preciso redimensionar dinamicamente com a janela, uso porcentagem.
