Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

font-size

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Media Queries e atividade Projeto #1

por Nícolas Guilherme Matheus
| 216.3k xp | 229 posts

Podemos substituir os 16px padrão por % em rem etc?

E se substituirmos, como vou saber os pixels pra conseguir fazer a conta depois?

pra ficar mais claro, vou dar um exemplo:

html -> 16px
    body -> inherit
        h1 -> 1.5em (24px)

Se eu fizer dessa maneira como no css abaixo, como vou ter a base em pixel?

 html -> 1em
    body -> inherit
        h1 -> 1.5em (quanto é em pixel?????? se eu não defini nenhum PAI com pixel).

Código que me surgiu essa dúvida:

CSS:

@media (min-width: 600px) {
    html {
        font-size: 1.125em;
    }
}
@media (min-width: 1000px) {
    html {
        font-size: 1.25em;
    }
}

E outra coisa, independente se definirmos o "PAI MASTER" com pixel ou em etc, sempre que alterarmos ele, ele vai fazer a cascata nos outros elementos filhos?

6 respostas
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Nicolas, o negócio da sua questão é o seguinte. Definindo ou não sua fonte no HTML, todo o navegador tem o tamanho de fonte padrão dele. Quando você define o tamanho da fonte na tag html, você está dizendo pra todos os navegadores que você nao aceita o tamanho que eles dão por padrão, que pode ser 16px no chrome e 14 no Ópera e padroniza o uso deles.

Se você usa 1em no HTML, você vai ter inconsistência no tamanho das fontes no seu documento em outros navegadores

Sendo que 1em no chrome vai ser 16px, mas 1em no Opera vai ser 14px já que o em usa porcentagem

por Nícolas Guilherme Matheus
| 216.3k xp | 229 posts

Allan, muito obrigado pela sua explicação, só recapitulando então para eu fixar.

Uma boa prática seria:

EXEMPLO:

Definir determinado pixel no HTML(padronizando todos os navegadores), e no body usar medidas flexíveis? em rem % etc?

solução!
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

[ CORRIGIDO ]

Sim.

O ideal mesmo é usar o REM ( root EM ) por que ele sempre vai buscar o valor que você definir no HTML.

O em busca o valor do pai. Como no código abaixo:

<div class="container" style="font-size: 22px">
    <p style="font-size: 1em">um texto </p> <!-- a fonte vai ter 22px por que o pai dela definiu esse valor e ela usa o EM que referencia o próprio pai -->
</div>

Usando o REM, você jamais vai ter esse valor sobrescrito. Ele sempre irá usar o que você determinar no html

<html style="font-size: 16px">
<div class="container" style="font-size: 22px">
    <p style="font-size: 1rem">um texto </p><!-- a fonte vai ter 16px por que ohtml definiu esse valor e ela usa o REM que referencia o próprio HTML -->
</div>
</html>

Testa esses dois códigos e vê que interessante

Tenta brincar com eles, mudando o valor Font size do ppra EM e mudando o valor global do HTML

por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Lembrando que eu declarei CSS direto no HTML pra fins de facilitar seu entendimento. Estilos devem ser declarados no arquivo CSS

por Nícolas Guilherme Matheus
| 216.3k xp | 229 posts

Siimm, também utilizo rem nos meus projetos, acho mais fácil, fica mais fácil ainda quando defino a font no html.

html{
    font-size: 62.5%;
}

com a fonte definida assim, se eu colocar em qualquer outro elemento a fonte de 1.6rem fica = a 16px, 2.2rem = 22px e assim vai.

O Ruim do EM é esse retrabalho de ficar recalculando a fonte toda hora que você precisa definir uma, E quanto mais filho o elemento PAI tiver, Na minha opnião, se precisar alterar tudo depois por algum motivo, vai dar um retrabalho desnecessário.

OBS: Eu entendo um pouco sobre o assunto, pois estudei por fora (estudo picado), agora que estou na alura da pra solidificar esse conhecimento ^^.

Obrigado mais uma vez Allan, pelos seus esclarecimentos e conhecimentos.

por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Sempre que precisar, meu caro!