A relação e proporção entre as medidas de unidades do CSS (Cascading Style Sheet) nos browsers Internet Explorer 7+ e Firefox 2, e como isto é útil ao usuário.

Saber as relações entre unidades e medidas de tamanho e tipografia, ajuda na criação do layout para diferente saídas (impressora, monitores, handhelds…) dos documentos na internet. Um exemplo rápido, seria evitar uma área de texto ou tabela para impressão, maior do que 190mm ou 720px. Qualquer boleto bancário, tabelas ou documento WEB maior do que esta largura, trás uma experiência indesejável para o usuário e desperdício de papel.

Basicamente, as medidas e unidades no CSS seguem esta relação abaixo. Isto vale caso o usuário não tenha alterado sua configuração.

As relações default são:

• 1em = 16pt
• 1in = 96px
• 1pt = 1/72in
• 1pt = 1.333px
• 1pt = 0.352mm
• 1px = 0.264mm

O exemplo abaixo é um conjunto de 4 caixas similares visualmente em seu tamanho, mas com uma especificação de tamanho e unidades diferentes entre sí. Demonstrando como os valores variam entre as unidades, para alcançar o mesmo resultado na dimensão.

Pergunta, porquê é útil saber isto? Ora, sabendo a relação entre unidades, você pode controlar o tamanho dos objetos na página HTML, independente do tamanho da tela ou tipo de saída do equipamento utilizado (impressora, monitor…). Este conhecimento é básico para entender CSS Vetorizado.

Você quer saber mais sobre layout em CSS, visite a seção:
Web Style Sheets

É isso pessoal. T+

Tags: CSS Vetorized, Impressao, Internet Explorer, Mozilla Firefox, Style Sheets, Tableless, Tutorial, Unidades e Proporcao