10

Como se pode ver aqui e aqui, o Bootstrap 4 usa as unidades rem e em ao invés de usar em px.

Trecho do código usando a unidade rem:

$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

Trecho do código usando em:

$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;

Qual o motivo de não usarem pixels?

3

1 Resposta 1

21

Basicamente é devida a acessibilidade e controle do layout do design system.

Usando medidas em REM / EM se o usuário mudar o tamanho da font root ele vai ter uma aumento homogêneo de todo o texto na tela. Na maioria dos browser o valor do font-size default é 16px, equivalente a 1rem. Então tendo todas a medidas relativas, se vc mudar o valor do font root vc muda toda a escala tipográfica da página. Porém mantendo a relação de hierarquia tipográfica definida. Assim como margin e paddings que tb são baseados em rem/em.

Vale ressaltar que REM e EM não são a mesma coisa, enquanto REM é relativo ao font-size do :root, o EM é relativo ao font-size declarado no elemento (obviamente se vc não declarar nada ele pega como referência os 16px do root), por exemplo, se vc declara o elemento com font-size de 20px e a margin com 0.5em, esses 0.5 em correspondem a 10px. Vc pode ler mais sobre isso aqui: Por que é recomendado utilizar a unidade "em" ao invés de "px" para fontes?

Então essa é uma forma de manter a consistência tipográfica do design system, se o usuário tiver problema de visão e configurar uma fonte maior para o browser, o Bootstrap vai se adaptar para não quebrar o layout e manter a "harmonia" do layout.

Veja um exemplo prático do que quero dizer. Essa é a hierarquia padrão dos headers do user-agent, repare que quando eu mudo o valor da font do root todos os headers mudam por igual. Essa é a intenção das fontes rem/em, fica mais fácil pro designer controlar o sistema, mesmo o usuário mudando o valor do font root.

inserir a descrição da imagem aqui


Teste vc mesmo para entender melhor :)

Mude o valor do font root para ver como tudo se adapta e vc continua com a hierarquia, vc muda o font-size em apenas um seletor :root e muda o tamanho de todos os textos do documento.

:root {
	font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.5em;
}
<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> 
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br>
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> 

Veja um exemplo usando @media para aumentar o font root em telas grandes. Veja que se vc exibir o código em "tela cheia" os headers tb vão aumentar. Apenas mudando o valor do font-size no :root, isso ajuda muito para vc customizar seu tema e uso do Bootstrap.

inserir a descrição da imagem aqui

:root {
	font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.5em;
}

@media (min-width: 768px) {
	:root {
		font-size: 24px;
	}
}
<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> 
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br>
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> 


Bootstrap 5 + VW e o projeto RFS

Atualmente no Bootstrap 4.3 já é possível usar uma fonte mais responsiva, pois ela utiliza uma fórmula que usa a largura da tela para definir o tamanho da fonte do site. Na verdade ela deixa a fonte responsiva até 1200px que é o maior breakpoint e a partir daí ela fixa o tamanho da fonte para ela não crescer mais.

Link do projeto RFS (responsive font size) https://github.com/twbs/rfs

@media (max-width: 1200px) {
  .title {
    font-size: calc(1.525rem + 3.3vw); /* repare na medida em vw */
  }
}

Our biggest new addition to Bootstrap in v4.3 is responsive font sizes, a new project in the Bootstrap GitHub org to automate calculate an appropriate font-size based on the dimensions of a visitor’s device or browser viewport.

Traduzindo: "Nossa maior nova adição ao Bootstrap na v4.3 são os tamanhos de fonte responsivos, um novo projeto na Bootstrap GitHub org para automatizar o cálculo de um tamanho de fonte apropriada com base nas dimensões do dispositivo de um visitante ou do viewport do navegador."

Vc pode conferir no gráfico para entender melhor.

inserir a descrição da imagem aqui

Documentação oficial: https://getbootstrap.com/docs/4.1/content/typography/#responsive-typography

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .