Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cómo adaptar font size según resolución de pantalla

Estas en el tema de Cómo adaptar font size según resolución de pantalla en el foro de CSS en Foros del Web. Hola, soy nueva en este foro y me estreno con una importante duda... ¿Cómo puedo ajustar automáticamente el tamaño del texto dentro de una capa ...
  #1 (permalink)  
Antiguo 23/10/2014, 12:09
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 10 años, 1 mes
Puntos: 0
Pregunta Cómo adaptar font size según resolución de pantalla

Hola, soy nueva en este foro y me estreno con una importante duda...

¿Cómo puedo ajustar automáticamente el tamaño del texto dentro de una capa según la resolución de pantalla que tenga cada ordenador?

Lo que sucede es que, p. ej, en el ordenador de mi madre, que tiene automáticamente la letra más grande para leer mejor, los px del tamaño fuente del web que estoy construyendo son mayores y no se ajustan al diseño que yo he establecido des de mi ordenador. Por ejemplo: el menú lo tengo en 11px dentro de una capa de un width de 50%; como no el tamaño de la letra aumenta (en toda la web) y el menú se deforma a dos líneas, aunque el div, al tenerlo en porcentaje, se ajusta a la pantalla.
También sucede cuando empequeñezco la pestaña de la página, los divs y el background se ajustan a la pantalla, pero la letra sigue del mismo tamaño... a consecuencia se superponen capas, etc.

Las capas se ajustan automáticamente al usar porcentajes en sus tamaños, pero ¿cómo puedo hacerlo con el tamaño de la letra?

He leído algo sobre la unidad "rem" (en lugar de em o px), pero no me aclaro de como funciona.

Ojalá me puedan ayudar...
  #2 (permalink)  
Antiguo 23/10/2014, 13:17
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 9 meses
Puntos: 36
Respuesta: Cómo adaptar font size según resolución de pantalla

te comento que puedes utilizar la medida

font-size: #em;

en donde # es el numero que quieres

ahora bien si lo que quieres es darle tamaños distintos a las letras e incluso caracteristicas distintas dependiendo del medio


puedes utilizar los media queries

ejemplo

h1{font-size:14px;}

@media only screen and (max-width: 768px) {
h1{font-size:12px;}
}

en donde el h1 es para cualquier resolucion y el h1 que esta en el media querie es para resoluciones menores a 768px

aqui las medidas de boostrap para hacer responsivo el diseño

Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)

sigue el link y veras otras medidas

http://librosweb.es/foro/pregunta/18...ueries-de-css/
espero haberte ayudado , si no es eso lo que buscas escribe y con gusto lo vemos

una bonita tarde
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #3 (permalink)  
Antiguo 24/10/2014, 11:46
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Cómo adaptar font size según resolución de pantalla

¡Gracias por tu ayuda herzbazi!

Entonces, ¿la unidad "em" se adapta al tamaño de las capa/resolución de pantalla?

Probaré ambas posibilidades.

El link para hacer responsive el web es muy interesante, ya que hoy en día mucha gente mira los webs des del teléfono o tablets, pero en caso de que no usara esos códigos ¿el web se desconfiguraría en estos aparatos? No digo que no lo vaya hacer, pero la verdad que llevo una semana construyendo el web y primero deseo acabarla y al final en todo caso hacerla responsive, pues para mi todo esto es nuevo (hace mucho que no hacía un web).
  #4 (permalink)  
Antiguo 24/10/2014, 13:54
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 16 años, 2 meses
Puntos: 175
Respuesta: Cómo adaptar font size según resolución de pantalla

Deberías pensar de ambas maneras, es un ejercicio tedioso, pero útil. Hacer un sitio y luego hacerlo adaptable me parece un poco arriesgado y a veces con resulados frustrantes.

Para eso siempre el diseñador del sitio debe pensar en SECCIONES tipo boceto de "cajas" y armas tu estructura en dibujo, asi luego con el mismo dibujo vas ordenando para la vistas para distintos móviles.

Otra opción es utilizar librerias como Boostrap.
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #5 (permalink)  
Antiguo 25/10/2014, 02:06
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 16 años, 1 mes
Puntos: 12
Respuesta: Cómo adaptar font size según resolución de pantalla

Usa media queries y revisa el viewport, visto lo anterior según la resolución del dispositivo asigna un tamaño determinado de fuente.

Los "em" o "rem" no tiene relación directa con la resolución en la cual se esta presentando, solo con el navegador y el valor que este tenga por defecto.
__________________
Mi web --> www.CarlosPC.net
  #6 (permalink)  
Antiguo 25/10/2014, 15:59
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 9 meses
Puntos: 36
Respuesta: Cómo adaptar font size según resolución de pantalla

Cita:
Iniciado por Llunetica Ver Mensaje
¡Gracias por tu ayuda herzbazi!

Entonces, ¿la unidad "em" se adapta al tamaño de las capa/resolución de pantalla?

Probaré ambas posibilidades.

El link para hacer responsive el web es muy interesante, ya que hoy en día mucha gente mira los webs des del teléfono o tablets, pero en caso de que no usara esos códigos ¿el web se desconfiguraría en estos aparatos? No digo que no lo vaya hacer, pero la verdad que llevo una semana construyendo el web y primero deseo acabarla y al final en todo caso hacerla responsive, pues para mi todo esto es nuevo (hace mucho que no hacía un web).
tengo varios videotutoriales por si te interesan

html, css, javascript, php y mysql entre otros
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #7 (permalink)  
Antiguo 27/10/2014, 16:30
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Cómo adaptar font size según resolución de pantalla

¡Hola a todxs!

Bueno, ya tengo los ojos que se me caen de las cuencas, pero lo voy pillando :'D
Muchas gracias por vuestra ayuda : )

Os comparto este video tutorial (http://www.falconmasters.com/tutoriales/tutorial-responsive-design) que me está ayudando bastante a entender como funciona lo de la web responsive, y lo mejor es que es cortito y claro (no sé si es de alguno de ustedes). Estoy ahora con las medidas, pero supongo que con el código media screen este puedo también modificar el tamaño de la letra, así que... ¡PERFECTO! (Y si no me daré cuenta en unas horas... cruzo los dedos).

Gracias por todo : )

¡Saludos!

Última edición por Llunetica; 06/12/2014 a las 14:14

Etiquetas: fuente, pantalla, resolución, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:37.