CSS 3: Responsividade#

Unidades absolutas ou relativas?#

Além de px, existem outras unidades absolutas em CSS: cm (centímetros), in (polegadas), etc. No entanto, via de regra, evitaremos usar unidades absolutas para tamanho ou posição de elementos, pois essas unidades são inadequadas para designs responsivos, que funcionam em qualquer tamanho de tela.

De fato, EVITAREMOS INCLUSIVE USAR PX. Eu sei que usamos bastante px até agora, mas era só para facilitar e permitir que o foco ficasse em outros assuntos. A partir de agora, vamos praticamente parar de usar, exceto em casos pontuais. Essa restrição será exigida nas entregas.

Em vez disso, usaremos principalmente unidades relativas, como % e a unidade muito importante da próxima seção.

Exercise 1

Answer

Design de páginas responsivas tem a ver com fazer páginas que ficam boas independente da tela do dispositivo.

A unidade relativa rem#

Porcentagens são unidades úteis para designs responsivos, mas a referência delas é o tamanho do elemento pai. Isso até funciona para tamanho e posição, mas não é muito adequado para propriedades como margin, border e padding. E por que exatamente não é adequado? Porque o que define uma dimensão adequada para essas propriedades não é o tamanho do pai e sim o tamanho da fonte.

Considere por exemplo, a imagem abaixo.

Padding 1

Essa imagem veio, novamente, da página do bolo de cenoura. Nessa página, não foi definido o tamanho da fonte para elementos p, então esses elementos usam o tamanho padrão do Chrome, que é 16px. Sabemos também que a espessura da borda é 1px e a espessura do padding é 10px.

Vamos agora definir um tamanho de fonte para o documento HTML em vez de usar o tamanho padrão do Chrome. Aliás, vamos aproveitar e testar um tamanho maior.

html {
    font-size: 64px;
}

Repare no que acontece com esse parágrafo em particular.

Padding 2

Dois efeitos indesejáveis podem ser observados:

a borda parece fina demais, quando comparada ao traço dos caracteres;
o padding parece fino demais, quando comparado ao espaçamento dos caracteres.

Observe o que acontece agora quando usamos a unidade especial rem...

p {
    border: 0.1rem solid black;
}

.first {
    padding: 1rem;
}

...no caso em que a fonte é o tamanho padrão do Chrome...

Padding 3

...e no caso em que a fonte é 64px.

Padding 4

Observe como a "ampliação" está muito mais coerente agora. É por isso que para essas propriedades costuma ser mais recomendado usar a unidade rem, que é proporcional ao tamanho de uma letra (mais especificamente a letra "M", por isso o nome que vem de "relative em") em vez de porcentagem.

Exercise 2

Answer

Existem outras unidades que não vamos abordar, mas que podem ser úteis em alguns casos. Três particularmente interessantes são o ch, vw e vh.

Regras de responsividade básicas#

A partir de agora, tanto nas atividades de aula como nas entregas, vamos tentar obedecer às seguintes regras:

evitar usar unidades absolutas (px, cm, in, etc.) se possível;
dar preferência a unidades relativas (%, rem) sempre que possível;
evitar usar diretamente width, height e position;
dar preferência a usar o assunto da próxima página sempre que possível.