Unidades CSS
CSS tem várias unidades diferentes para a expressão de um comprimento.
Muitas propriedades CSS tomar "length" valores, tais como a largura, a margem, estofamento, font-size, border-width, etc.
O comprimento é um número seguido por uma unidade de comprimento, tais como 10px, 2em, etc.
Um espaço em branco não podem aparecer entre o número ea unidade. No entanto, se o valor for 0, a unidade pode ser omitido.
Para algumas propriedades CSS, comprimentos negativos são permitidos.
Existem dois tipos de unidades de comprimento: relativa e absoluta.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a unidade de comprimento.
| unidade de comprimento | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3,5 |
| ch | 27,0 | 9 | 1.0 | 7 | 20,0 |
| rem | 4.0 | 9 | 3.6 | 4.1 | 11,6 |
| vh, vw | 20,0 | 9 | 19,0 | 6 | 20,0 |
| vmin | 20,0 | 9.0 * | 19,0 | 6 | 20,0 |
| vmax | 26,0 | Não suportado | 19,0 | Não suportado | 20,0 |
Note: Internet Explorer 9 suporta vmin com o nome não-padrão: vm.
comprimentos relativos
unidades de comprimento relativo especificar um comprimento em relação a outra propriedade de comprimento. unidades de comprimento relativo escala melhor entre os diferentes meios de renderização.
| Unidade | Descrição |
|---|---|
| em | Em relação ao font-size do elemento (2em means 2 times the size of the current font) Experimente-o |
| ex | Em relação à x-height da fonte atual (rarely used) Experimente |
| ch | Em relação à largura do "0" (zero) |
| rem | Em relação ao tamanho da fonte do elemento raiz |
| vw | Em relação ao 1% da largura da janela de exibição * Experimente |
| vh | Em relação ao 1% da altura da janela de exibição * Experimente |
| vmin | Em relação ao 1% da janela do * menor dimensão Experimente |
| vmax | Em relação ao 1% da janela do * maior dimensão Experimente |
| % |
Tip: A EM e rem unidades são práticos na criação de layout perfeitamente escalável!
* Viewport = o tamanho da janela do navegador. Se a janela de exibição é 50 centímetros de largura, 1vw = 0,5 centímetros.
Comprimentos absoluta
As unidades de medida absolutos são fixos e um comprimento expresso em qualquer um destes irá aparecer como exatamente esse tamanho.
unidades de medida absolutos não são recomendados para uso na tela, porque os tamanhos de tela variam muito. No entanto, eles podem ser usados, se o meio de saída é conhecida, tal como, por esquema de impressão.
| Unidade | Descrição |
|---|---|
| cm | centímetros Experimente |
| mm | milímetros Experimente |
| in | polegadas (1in = 96px = 2.54cm) Experimente |
| px * | pixels (1px = 1/96th of 1in) Experimente |
| pt | pontos (1pt = 1/72 of 1in) Experimente |
| pc | picas (1pc = 12 pt) Experimente |
* Os pixels (px) são em relação ao dispositivo de visualização. Para dispositivos de baixa dpi, 1px é um pixel dispositivo (dot) da tela. Para telas de alta resolução impressoras e 1px implica vários pixels do dispositivo.