Dado un documento HTML y la tarea es cambiar el tamaño de fuente en función del tamaño de la ventana con la ayuda de JavaScript.
Enfoque 1:
- Primero convierta los tamaños de fuente del elemento del documento a em o % usando una función.
- Llame a esta función en cada cambio de tamaño de la ventana. Cambiará el tamaño de la fuente según el tamaño de la ventana.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to set font size based on
container size using JavaScript?
</title>
</head>
<body style = "text-align:center;">
<h1 id = "h1" style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var h1 = document.getElementById('h1');
up.innerHTML = "Resize the window to change"
+ "the font-size based on window-size";
h1.setFont = function (font) {
var size = this.offsetWidth,
font_size = size * font;
this.style.fontSize = font_size + '%';
return this
};
h1.setFont(0.50);
window.onresize = function () {
h1.setFont(0.50);
}
</script>
</body>
</html>
Producción:
- Antes de cambiar el tamaño de la ventana:
- Después de cambiar el tamaño de la ventana:
Enfoque 2: use la unidad vw (ventana gráfica) con el tamaño de fuente para convertir el tamaño de fuente con respecto a la ventana gráfica.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to set font size based on
container size using JavaScript?
</title>
<style>
#h1 {
font-size: 5vw;
}
</style>
</head>
<body style = "text-align:center;">
<h1 id = "h1" style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var h1 = document.getElementById('h1');
up.innerHTML = "Resize the window to change"
+ "the font-size based on window-size";
</script>
</body>
</html>
Producción:
- Antes de cambiar el tamaño de la ventana:
- Después de cambiar el tamaño de la ventana:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA