|
A maioria dos designers nacionais gosta de usar px, enquanto a maioria dos sites estrangeiros prefere usar em e rem, então qual é a diferença entre os três e quais são as vantagens e desvantagens de cada um? Vamos te dar uma introdução detalhada. Recursos do PX: 1. IE não pode ajustar o tamanho da fonte daqueles que usam px como unidade; 2. A razão pela qual a maioria dos sites estrangeiros pode ser ajustada é que eles usam em ou rem como unidades de fonte; 3. O Firefox pode ajustar px, EM e rem, mas mais de 96% dos internautas chineses usam o navegador (ou kernel) do IE. Pixels de px. Unidades de comprimento relativo. Pixel px é relativo à resolução da tela do monitor. (Citado do manual CSS2.0) em é uma unidade relativa de comprimento. Tamanho da fonte relativo ao texto dentro do objeto atual. Se o tamanho da fonte do texto na linha não for definido artificialmente, ele será relativo ao tamanho padrão da fonte do navegador. (Citado do manual CSS2.0) A altura padrão da fonte para qualquer navegador é 16px. Todos os navegadores não ajustados cumprem: 1em=16px. Então 12px=0,75em, 10px=0,625em. Para simplificar a conversão por tamanho de fonte, você precisa declarar tamanho-fonte=62,5% no seletor de corpo em css, o que faz com que o valor em seja 16px*62,5%=10px, então 12px=1,2em, 10px=1em, o que significa que você só precisa dividir seu valor px original por 10 e então substituí-lo por em como unidade. Recursos de EM: 1. O valor de em não é fixo; 2. Em herda o tamanho da fonte do elemento pai. Então, quando escrevemos CSS, precisamos prestar atenção a duas coisas: 1. Declarar tamanho da fonte=62,5% no seletor de corpo; 2. Divida seu valor px original por 10 e substitua por em como unidade; 3. Recalcule os valores em dessas fontes ampliadas. Evite declarações repetidas sobre o tamanho da fonte. Ou seja, para evitar o fenômeno de 1,2 * 1,2 = 1,44. Por exemplo, se você declarar o tamanho da fonte 1,2em em #content, ao declarar o tamanho da fonte de p, ele só pode ser 1em, não 1,2em, porque esse em não é aquele em, e ele se torna 1em=12px porque herda a altura da fonte de #content. Características REM rem é uma nova unidade relativa (raiz em) adicionada ao CSS3, que tem atraído muita atenção. Qual é a diferença entre essa unidade e a EM? A diferença é que, quando você usa rem para definir o tamanho da fonte de um elemento, ele ainda é o tamanho relativo, mas o relativo é apenas a raiz do HTML. Pode-se dizer que essa unidade combina as vantagens do tamanho relativo e do tamanho absoluto, pelas quais pode não apenas modificar apenas o elemento raiz para ajustar todos os tamanhos de fonte proporcionalmente, mas também evitar a reação em cadeia de composição dos tamanhos das fontes camada por camada. Atualmente, o rem é suportado em todos os navegadores, exceto o IE8 e versões anteriores. Para navegadores que não suportam isso, a resposta também é muito simples, que é escrever uma instrução unidade absoluta. Esses navegadores ignoram o tamanho da fonte definido com rem. Aqui está um exemplo: p {font-size:14px; tamanho da fonte: .875rem; } Nota:A escolha das unidades de fonte depende muito do seu projeto, e se sua base de usuários estiver usando a versão mais recente do navegador, então o REM é recomendado; se a compatibilidade for uma preocupação, use px, ou ambos. Aqui está o endereço da ferramenta de conversão de unidades px, em, REM:http://pxtoem.com/
| 
Publicado em 21/03/2017 09:31:50
|
|
|
