Hay varias formas de poner texto en un contenedor y tener un tamaño para llenar ese contenedor.
Existen diferentes métodos, como el uso de CSS y jQuery, que se explican a continuación.
Uso de la propiedad CSS (ancho de la ventana gráfica): es vwuna propiedad CSS para crear una tipografía receptiva en el archivo HTML. La ventana gráfica tiene el tamaño de una ventana de navegador. El «tamaño del texto» se puede configurar con unidades «vw» y puede encontrar un número exacto en el que el texto se ajuste bastante al contenedor y no se rompa al cambiar el tamaño de la ventana del navegador.
1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 100 cm de ancho, 1vw es 10 cm.
Ejemplo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on the width
of container?
</title>
<style>
h1 {
font-size: 8vw;
color: green;
font-weight: bold;
}
p {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
changes.
</p>
</body>
</html>
Producción:
- En el escritorio:
- En iPad:
Uso de la propiedad CSS (consultas de medios): también puede usar consultas de medios para cambiar el tamaño de fuente de un elemento en tamaños de pantalla específicos. La @mediaregla, que permite definir diferentes reglas de estilo para diferentes tipos de medios.
Ejemplo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on width of
container?
</title>
<style>
h1 {
color: green;
}
@media screen and (min-width: 601px) {
h1 {
font-size: 80px;
}
p {
font-size: 40px;
}
}
@media screen and (max-width: 600px) {
h1 {
font-size: 40px;
}
p {
font-size: 20px;
}
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Set the <em>font-size</em> of "h1"
to "40px" and <em>paragraph</em> to
"20px", when the window's width is
"600px" wide or less and when it
is "601px" or wider, set the
<em>font-size</em> to "80px" and
<em>paragraph</em> to "40px".
Resize the browser window to
see the effect.
</p>
</body>
</html>
Producción:
- En el escritorio:
- En iPad:
Uso del complemento FitText jQuery: hay un complemento jquery que puede hacer que los tamaños de fuente sean flexibles en el diseño receptivo, a saber, FitText. Por ejemplo, se puede usar el complemento para hacer tamaños de texto escalables con respecto al ancho del contenedor.
Ejemplo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>H
ow to change font size
depending on width of c
ontainer?
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
scales.
</p>
<script type="text/javascript" src=
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/textFit.js">
</script>
<script type="text/javascript">
textFit(document.querySelector("h1"));
</script>
</body>
</html>
Producción:
- En el escritorio:
- En iPad:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por ankitabag123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA