¿Cómo cambiar el tamaño de la letra de forma dinámica en CSS y JavaScript?

  • Autor Autor Frankqoo
  • Fecha de inicio Fecha de inicio
Frankqoo

Frankqoo

Gamma
Verificado por Whatsapp
Hola, ando necesitando algún sistema en el que la letra que se encuentra en un div especifico se valla haciendo mas chica o mas grande según el ancho del div. Alguien sabe? O me puede ayudar?

PD: Ya google, pero es difícil encontrar ese problema especifico.

Saludos!
 
Se realiza con media screen es css y asi lo haces responsive.
 
Saludos, por ejemplo
@ media (max-width: 400px){.nombredelclass{font-size:10px}} la @ junto a media
 
SnakeNet dijo:
Se realiza con media screen es css y asi lo haces responsive.
Hacer clic para expandir...

Pero el media screener es para la pantalla en total. Yo necesito para un div en especifico.
Saludos!

- - - Actualizado - - -

Es en especial para un reproductor de video con subtitulos, entonces cuando hace full screen los subtitulos se quedan de igual tamaño que si no estuviera full-screen. El reproductor es mediaelement.js espero alguien me pueda ayudar.
 
Entonces quizás algo así.

<script> var fontSize = 1; // funcion para aumentar la fuente function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } // funcion para disminuir la fuente function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; } </script>

Pero adaptándolo a la opción que nombras para cuando haces fullscreen o no que haga el balance de cambio de texto.
 
SnakeNet dijo:
Entonces quizás algo así.

<script> var fontSize = 1; // funcion para aumentar la fuente function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } // funcion para disminuir la fuente function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; } </script>

Pero adaptándolo a la opción que nombras para cuando haces fullscreen o no que haga el balance de cambio de texto.
Hacer clic para expandir...

Gracias voy a probar este haber que tal me va!
 
Necesitas leer algo de responsive design, necesitas forsozamente la linea de codigo [MENTION=16931]medi[/MENTION]a screen and (min-width: valor){
AQUI ENTRAS A TU DIV Y CAMBIAS VALORES SEGUN LA RESOLUCION QUE PUSISTE EN "(min-width: valor)"

}

Normalmente se utilizan 3 resuluciones estandar la de 360p, 720p y 1080p, añade 3 [MENTION=16931]medi[/MENTION]a screen y modificas los valores segun la resolucion!

Suerte.:encouragement:
 
Responsive muchacho ya estan las ideas que comentaron los demas usuarios 🙂
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

P
Tutorial: Cómo crear un menú desplegable con HTML y CSS sin JavaScript.
Respuestas
5
Visitas
449
PHOTOPEA
P
J
Cómo cambiar el tamaño de la letra en el editor
Respuestas
4
Visitas
547
jesusanz
J
Atrás
Arriba