El tamaño de fuente se puede configurar con la unidad vw (ventana gráfica), lo que significa el ancho de la ventana gráfica. La ventana gráfica es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm. De esa manera, el tamaño de la fuente seguirá el tamaño de la ventana del navegador.
Sintaxis:
element {
font-size: #vw;
// CSS Property
}
Donde # es un número relativo al tamaño del contenedor.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Font Scaling</title>
<style>
#container {
display: inline-block;
background-color: green;
padding: 0.5vw 1vw;
}
.divtext {
display: table;
color: white;
font-family: impact;
font-size: 4.2vw;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="container">
<div class="divtext">
Resize the browser window to see how the font size scales.
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: las consultas de medios se pueden usar para cambiar el tamaño de fuente de un elemento en tamaños de pantalla específicos.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font Scaling</title>
<style>
h2 {
text-align: center;
}
div.example {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
@media screen and (min-width: 601px) {
div.example {
font-size: 40px;
}
.a{
font-size: 25px;
text-align: center;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
.a{
font-size: 18px;
text-align: center;
}
}
@media screen and (min-width: 800px) {
div.example {
font-size: 60px;
}
.a{
font-size: 35px;
}
}
</style>
</head>
<body>
<div class="example">Font size automatically adjusting
according to the width of the container</div>
<p class = "a">Change the width of the browser window
to see the font scaling automatically according to the
container size.</p>
</body>
</html>
Producción:
Nota: Cambie el tamaño de la ventana del navegador para ver los cambios en el tamaño de fuente.
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA