7.1 Princípios Básicos
Fontes Responsivas têm um papel importante na criação de web design adaptativo. Usar unidades relativas como
vw, vh, vmin, e vmax, permite que as fontes se ajustem dinamicamente de acordo com o tamanho do
viewport, garantindo uma exibição de texto otimizada em diversos dispositivos. Vamos explorar como essas unidades funcionam
e como usá-las para criar fontes responsivas.
Conceitos principais
vw e vh:
vw(viewport width): 1 unidadevwé igual a 1% da largura do viewportvh(viewport height): 1 unidadevhé igual a 1% da altura do viewport
vmin e vmax:
vmin(viewport minimum): 1 unidadevminé igual a 1% da menor dimensão do viewport (ou largura, ou altura)vmax(viewport maximum): 1 unidadevmaxé igual a 1% da maior dimensão do viewport (ou largura, ou altura)
Vantagens das fontes responsivas:
- Melhora da legibilidade: o tamanho da fonte se ajusta automaticamente ao tamanho da tela, permitindo uma leitura confortável em qualquer dispositivo
- Flexibilidade de design: fontes responsivas ajudam a manter um design harmonioso e equilibrado quando o tamanho do viewport muda
- Abordagem uniforme: usar unidades relativas para fontes permite manter uma abordagem uniforme na criação de design adaptativo
7.2 Exemplos de uso de vw e vh
Exemplo 1: Tamanho de fonte base usando vw
Vamos criar um exemplo onde o tamanho da fonte muda de acordo com a largura do viewport:
body {
font-size: 2vw; /* Tamanho da fonte é igual a 2% da largura do viewport */
}
h1 {
font-size: 4vw; /* Tamanho da fonte do título é igual a 4% da largura do viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonte Responsiva usando vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Título Responsivo</h1>
<p>Este texto muda de tamanho de acordo com a largura do viewport.</p>
</body>
</html>
Explicação do código:
body { font-size: 2vw; }: define o tamanho da fonte para o texto dentro dobody, igual a 2% da largura do viewporth1 { font-size: 4vw; }: define o tamanho da fonte para o cabeçalhoh1, igual a 4% da largura do viewport
Exemplo 2: Tamanho de fonte base usando vh
Agora vamos criar um exemplo onde o tamanho da fonte muda de acordo com a altura do viewport:
body {
font-size: 2vh; /* Tamanho da fonte é igual a 2% da altura do viewport */
}
h1 {
font-size: 4vh; /* Tamanho da fonte do título é igual a 4% da altura do viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonte Responsiva usando vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Título Responsivo</h1>
<p>Este texto muda de tamanho de acordo com a altura do viewport.</p>
</body>
</html>
Explicação do código:
body { font-size: 2vh; }: define o tamanho da fonte para o texto dentro dobody, igual a 2% da altura do viewporth1 { font-size: 4vh; }: define o tamanho da fonte para o cabeçalhoh1, igual a 4% da altura do viewport
7.3 Exemplos de uso de vmin e vmax
Exemplo 1: Tamanho de fonte base usando vmin
Vamos criar um exemplo onde o tamanho da fonte muda de acordo com a menor dimensão do viewport:
body {
font-size: 2vmin; /* Tamanho da fonte é igual a 2% da menor dimensão do viewport */
}
h1 {
font-size: 4vmin; /* Tamanho da fonte do título é igual a 4% da menor dimensão do viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonte Responsiva usando vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Título Responsivo</h1>
<p>Este texto muda de tamanho de acordo com a menor dimensão do viewport.</p>
</body>
</html>
Explicação do código:
body { font-size: 2vmin; }: define o tamanho da fonte para o texto dentro dobody, igual a 2% da menor dimensão do viewporth1 { font-size: 4vmin; }: define o tamanho da fonte para o cabeçalhoh1, igual a 4% da menor dimensão do viewport
Exemplo 2: Tamanho de fonte base usando vmax
Vamos criar um exemplo onde o tamanho da fonte muda de acordo com a maior dimensão do viewport:
body {
font-size: 2vmax; /* Tamanho da fonte é igual a 2% da maior dimensão do viewport */
}
h1 {
font-size: 4vmax; /* Tamanho da fonte do título é igual a 4% da maior dimensão do viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonte Responsiva usando vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Título Responsivo</h1>
<p>Este texto muda de tamanho de acordo com a maior dimensão do viewport.</p>
</body>
</html>
Explicação do código:
body { font-size: 2vmax; }: define o tamanho da fonte para o texto dentro dobody, igual a 2% da maior dimensão do viewporth1 { font-size: 4vmax; }: define o tamanho da fonte para o cabeçalhoh1, igual a 4% da maior dimensão do viewport
GO TO FULL VERSION