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