Como alterar o tamanho da letra de forma dinâmica em CSS e JavaScript?

Frankqoo

Gamma

• 15/11/2014

• #1

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!

 

S

SnakeNet

Xi

Programador

• 15/11/2014

• #2

Se realiza con media screen es css y asi lo haces responsive.

 

N

nicorto

Lambda

Verificación en dos pasos activada

• 15/11/2014

• #3

Saludos, por ejemplo
@ media (max-width: 400px){.nombredelclass{font-size:10px}} la @ junto a media

 

lombervid

Eta

Verificación en dos pasos activada

• 15/11/2014

• #4

FlowType.JS

 

Frankqoo

Gamma

• 15/11/2014

• #5

SnakeNet disse:

Se realiza con media screen es css y asi lo haces responsive.

Clique 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.

 

S

SnakeNet

Xi

Programador

• 16/11/2014

• #6

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.

 

Frankqoo

Gamma

• 16/11/2014

• #7

SnakeNet disse:

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.

Clique para expandir...

Gracias voy a probar este haber que tal me va!

 

S

SnakeNet

Xi

Programador

• 16/11/2014

• #8

Ya nos diras si te sirvio el código.

 

ZyOps

Dseda

Marketing

• 30/12/2014

• #9

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:

 

M

Manuel Guerra

1

Iota

Verificado

Suscripción a IA

• 30/12/2014

• #10

Responsive muchacho ya estan las ideas que comentaron los demas usuarios 🙂