Tamaño de fuente receptivo

Creé un sitio usando la grilla Zurb Foundation 3. Cada página tiene una gran h1.

CSS

body {font-size:100%} /* Headers */ h1 { font-size:6.2em;font-weight:500; } 

HTML

 

LARGE HEADER TAGLINE

Cuando cambio el tamaño del navegador al tamaño móvil, la fuente grande no se ajusta y hace que el navegador incluya un desplazamiento horizontal para acomodar el texto grande.

Me di cuenta de que en la página de ejemplo de Zurb Foundation 3 Typography, los encabezados se adaptan al navegador a medida que se comprime y expande.

¿Me estoy perdiendo algo realmente obvio? ¿Cómo logro esto?

El font-size no responderá así al cambiar el tamaño de la ventana del navegador. En su lugar, responden a la configuración del zoom / tamaño del navegador, como si presionas ctrl y + juntos en el teclado mientras estás en el navegador.

Preguntas de los medios

Tendría que considerar el uso de consultas de medios para reducir el tamaño de fuente en ciertos intervalos donde comienza a romper su diseño y crear barras de desplazamiento.

Por ejemplo, intente agregar esto dentro de su CSS en la parte inferior, cambiando el ancho de 320px dondequiera que su diseño comience a romperse:

 @media only screen and (max-width: 320px) { body { font-size: 2em; } } 

Longitudes de porcentaje de la ventana gráfica

También puede usar longitudes de porcentaje de ventana como vw , vh , vmin y vmax . El documento oficial W3C para esto dice:

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque que contiene inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se ajustan en consecuencia.

De nuevo, del mismo documento W3C cada unidad individual se puede definir de la siguiente manera:

unidad vw: igual al 1% del ancho del bloque contenedor inicial.

unidad vh: igual al 1% de la altura del bloque contenedor inicial.

unidad vmin – Igual al menor de vw o vh.

unidad vmax – Igual a la mayor de vw o vh.

Y se usan exactamente de la misma manera que cualquier otro valor de CSS:

 .text { font-size: 3vw; } .other-text { font-size: 5vh; } 

La compatibilidad es relativamente buena, como se puede ver aquí . Sin embargo, algunas versiones de IE y Edge no son compatibles con vmax. Además, iOS 6 y 7 tienen un problema con la unidad vh, que se solucionó en iOS 8.

Puede usar el valor de ventana gráfica en lugar de ems, pxs o pts.

1vw = 1% del ancho de la ventana gráfica

1vh = 1% de la altura de la ventana gráfica

1vmin = 1vw o 1vh, el que sea más pequeño

1vmax = 1vw o 1vh, el que sea mayor

 h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } 

de Css-tricks: http://css-tricks.com/viewport-sized-typography/

Utilice media especificadores de media CSS (eso es lo que usan [zurb]) para un estilo receptivo:

 @media only screen and (max-width: 767px) { h1 { font-size: 3em; } h2 { font-size: 2em; } } 

Si no te importa usar una solución jQuery, puedes probar el plugin TextFill

jQuery TextFill cambia el tamaño del texto para que quepa en un contenedor y hace que el tamaño de fuente sea lo más grande posible.

https://github.com/jquery-textfill/jquery-textfill

He estado jugando con formas de superar este problema, y ​​creo que he encontrado una solución:

Si puede escribir su aplicación para IE9 + y para todos los demás navegadores modernos compatibles con CSS calc (), unidades rem y unidades vmin, puede usar esto para lograr texto escalable sin consultas de medios:

 body { font-size: calc(0.75em + 1vmin); } 

Aquí está en acción: http://codepen.io/csuwldcat/pen/qOqVNO

Hay varias formas de lograr esto

Utilice la consulta de medios, pero requiere tamaños de fuente para varios puntos de interrupción

 body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } } 

Use dimensiones en % o em . Simplemente cambie el tamaño de la fuente base, todo cambiará. A diferencia de la anterior, simplemente podría cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de la fuente base sea el predeterminado del dispositivo y descansar todo en em

  1. “Ems” (em) : el “em” es una unidad escalable. Un em es igual al tamaño de letra actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em equivale a 12pt. Los Ems son de naturaleza escalable, por lo que 2em equivaldrían a 24pt, .5em equivaldrían a 6pt, etc.
  2. Porcentaje (%) : la unidad de porcentaje es muy parecida a la unidad “em”, salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de letra actual es igual al 100% (es decir, 12pt = 100%). Al usar la unidad de porcentaje, el texto sigue siendo totalmente escalable para dispositivos móviles y para el acceso.

ver kyleschaeffer.com / ….

CSS3 admite nuevas dimensiones relacionadas con el puerto de visualización. Pero esto no funciona en Android

  1. 3.2vw = 3.2% del ancho de la ventana gráfica
  2. 3.2vh = 3.2% de la altura de la ventana gráfica
  3. 3.2vmin = Más pequeño de 3.2vw o 3.2vh
  4. 3.2vmax = Más grande de 3.2vw o 3.2vh

     body { font-size: 3.2vw; } 

vea css-tricks.com / …. y también mire caniuse.com / ….

Esto se implementa parcialmente en la base 5.

en _type.scss tienen dos conjuntos de variables de encabezado

 // We use these to control header font sizes //for medium screens and above $h1-font-size: rem-calc(44) !default; $h2-font-size: rem-calc(37) !default; $h3-font-size: rem-calc(27) !default; $h4-font-size: rem-calc(23) !default; $h5-font-size: rem-calc(18) !default; $h6-font-size: 1rem !default; // We use these to control header size reduction on small screens $h1-font-reduction: rem-calc(10) !default; $h2-font-reduction: rem-calc(10) !default; $h3-font-reduction: rem-calc(5) !default; $h4-font-reduction: rem-calc(5) !default; $h5-font-reduction: 0 !default; $h6-font-reduction: 0 !default; 

Para medios arriba, generan tamaños basados ​​en el primer conjunto de variables.

 @media #{$medium-up} { h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; } h1 { font-size: $h1-font-size; } h2 { font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } } 

Y por defecto, es decir, pantallas pequeñas, usan el segundo conjunto de variables para generar css.

 h1 { font-size: $h1-font-size - $h1-font-reduction; } h2 { font-size: $h2-font-size - $h2-font-reduction; } h3 { font-size: $h3-font-size - $h3-font-reduction; } h4 { font-size: $h4-font-size - $h4-font-reduction; } h5 { font-size: $h5-font-size - $h5-font-reduction; } h6 { font-size: $h6-font-size - $h6-font-reduction; } 

puede usar estas variables y anular en su archivo scss personalizado para establecer tamaños de fuente para los respectivos tamaños de pantalla

Hay otro enfoque para los tamaños de fuente receptivos: usar unidades rem.

 html { /* base font size */ font-size: 16px; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } 

Más adelante en consultas de medios, puede ajustar todos los tamaños de fuente cambiando el tamaño de fuente base:

 @media screen and (max-width: 767px) { html { /* reducing base font size will reduce all rem sizes */ font-size: 13px; } /* you can reduce font sizes manually as well*/ h1 { font-size: 1.2rem; } h2 { font-size: 1.0rem; } } 

Para hacer que esto funcione en IE7-8 tendrá que agregar un repliegue con unidades de px:

 h1 { font-size: 18px; font-size: 1.125rem; } 

Si está desarrollando con LESS, puede crear un mixin que hará las matemáticas por usted.

Soporte de unidades Rem – http://caniuse.com/#feat=rem

La solución “vw” tiene un problema al acceder a pantallas muy pequeñas. Puede establecer el tamaño de la base y subir desde allí con calc ():

 font-size: calc(16px + 0.4vw); 

El tamaño de fuente receptivo también se puede hacer con este javascript llamado FlowType :

FlowType: tipografía web receptiva en su máxima expresión: tamaño de letra basado en el ancho del elemento.

O este javascript llamado FitText :

FitText – Hace que los tamaños de fuente sean flexibles. Use este complemento en su diseño receptivo para cambiar el tamaño de sus titulares según la proporción.

Si está utilizando una herramienta de comstackción, pruebe con Rucksack.

De lo contrario, puede usar las Variables CSS (Propiedades personalizadas) para controlar fácilmente los tamaños de fuente mínimo y máximo, como por ejemplo ( demostración ):

 * { /* Calculation */ --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { --max-size: 50; --min-size: 25; font-size: var(--responsive); } h2 { --max-size: 40; --min-size: 20; font-size: var(--responsive); } 

jQuery “FitText” es probablemente la mejor solución de encabezado receptivo. Compruébelo en Github: https://github.com/davatron5000/FitText.js

Al igual que con muchos marcos, una vez que “sale de la cuadrícula” y anula el CSS predeterminado del marco, las cosas comenzarán a romperse hacia la izquierda y hacia la derecha. Los marcos son inherentemente rígidos. Si tuviera que usar el estilo H1 predeterminado de Zurb junto con sus clases de cuadrícula predeterminadas, entonces la página web debería mostrarse correctamente en el móvil (es decir, receptivo).

Sin embargo, parece que quieres encabezados muy grandes de 6.2em, lo que significa que el texto tendrá que reducirse para ajustarse a una pantalla móvil en modo vertical. Su mejor opción es usar un complemento jQuery de texto receptivo, como FlowType y FitText . Si quieres algo ligero, puedes consultar mi plugin jQuery Scalable Text:

http://thdoan.github.io/scalable-text/

Uso de muestra:

  

Puede hacer que el tamaño de letra responda si lo define en vw (ancho de ventana gráfica). Sin embargo, no todos los navegadores lo admiten. La solución es usar JS para cambiar el tamaño de fuente base según el ancho del navegador y establecer todos los tamaños de fuente en%. Aquí hay un artículo que describe cómo hacer tamaños de letra responsivos: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

  h1 { font-size: 2.25em; } h2 { font-size: 1.875em; } h3 { font-size: 1.5em; } h4 { font-size: 1.125em; } h5 { font-size: 0.875em; } h6 { font-size: 0.75em; } 

Existen las siguientes formas en que puede lograr esto:

  1. Use rem para, por ejemplo, 2.3 rem
  2. Use em para, por ejemplo, 2.3em
  3. Use% para, por ejemplo, 2.3%. Además, puede usar: vh, vw, vmax y vmin.

Estas unidades se reajustarán según el ancho y la altura de la pantalla.

En sass original no scss, puede usar las siguientes mixins para establecer automáticamente el párrafo y todos los encabezados de tamaño de fuente.

Me gusta porque es mucho más compacto. Y más rápido para escribir. Aparte de eso, proporciona la misma funcionalidad. De todas formas, si todavía quieres mantenerte en la nueva syntax – scss, puedes convertir mi sass a scss aquí: [CONVERTIR SASS A SCSS AQUÍ]

A continuación te doy cuatro sass mixins. Tendrás que ajustar sus configuraciones a tus necesidades.

 =font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty =media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query =h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags =config-and-run-font-generator() // this one only calls the other ones 

Después de que termine de jugar con la configuración, solo haga una llamada en una mezcla, que es: + config-and-run-font-generator () . Ver el código a continuación y comentarios para más información.

Supongo que podría hacerlo automáticamente para la consulta de medios, como se hace para las tags de encabezado, pero todos utilizamos consultas de medios diferentes, por lo que no sería apropiado para todos. Utilizo el primer enfoque de diseño móvil así que así es como lo haría. Siéntase libre de copiar y usar este código.

COPIE Y PEGUE ESOS MEZCLOS A SU ARCHIVO

 =font-h1p-style-generator-manual() body font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts font-size: 100% line-height: 1.3em %headers line-height: 1em font-weight: 700 p line-height: 1.3em font-weight: 300 @for $i from 1 through 6 h#{$i} @extend %headers =media-query-base-font-size-change-generator-manual() body font-size: 1.2em @media screen and (min-width: 680px) body font-size: 1.4em @media screen and (min-width: 1224px) body font-size: 1.6em @media screen and (min-width: 1400px) body font-size: 1.8em =h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) $h1-fs: $h1-fs // set first header element to this size $h1-step-down: $h1-step-down // decrement each time by 0.3 $p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6) $h1-fs: $h1-fs + $h1-step-down // looping correction @for $i from 1 through 6 h#{$i} font-size: $h1-fs - ($h1-step-down * $i) @if $i == $p-same-as-hx p font-size: $h1-fs - ($h1-step-down * $i) // RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST =config-and-run-font-generator() +font-h1p-style-generator-manual() // just a place holder for our font style +media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here 

CONFIGURE TODOS LOS MIXINS A SUS NECESIDADES – ¡JUEGA CON ÉL! 🙂 Y LUEGO LLAMELO EN LA PARTE SUPERIOR DE SU CÓDIGO SASS REAL CON:

 +config-and-run-font-generator() 

Esto generaría esta salida. Puede personalizar parámetros para generar diferentes conjuntos de resultados, sin embargo, debido a que todos usamos diferentes medios, consulte algunas mezclas que deberá editar manualmente (estilo y medios).

CSS GENERADO:

 body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.3em; word-wrap: break-word; } h1, h2, h3, h4, h5, h6 { line-height: 1em; font-weight: 700; } p { line-height: 1.3em; font-weight: 300; } body { font-size: 1.2em; } @media screen and (min-width: 680px) { body { font-size: 1.4em; } } @media screen and (min-width: 1224px) { body { font-size: 1.6em; } } @media screen and (min-width: 1400px) { body { font-size: 1.8em; } } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } p { font-size: 1.2em; } h6 { font-size: 1em; } 

Después de muchas conclusiones terminé con esta combinación

 @media only screen and (max-width: 730px) { h2{ font-size: 4.3vw; } } 

Me temo que no hay una solución fácil con respecto al cambio de tamaño de fuente. Puede cambiar el tamaño de fuente mediante consulta de medios, pero técnicamente no cambiará de tamaño sin problemas. Por ejemplo, si usa:

 @media only screen and (max-width: 320px){font-size: 3em;} 

El tamaño de fuente será 3em, tanto para 300px como para 200px de ancho. Pero necesita un tamaño de fuente más bajo para un ancho de 200px para hacer una respuesta perfecta.

Entonces, ¿cuál es la verdadera solución? Solo hay una manera. Tienes que crear una imagen png (con fondo transparente) que contenga tu texto. Después de eso, puede hacer que su imagen responda fácilmente (por ejemplo, ancho: 35%; altura: 28 píxeles). De esta manera, su texto será totalmente receptivo con todos los dispositivos.

Aquí hay algo que funcionó para mí. Solo lo probé en un iPhone.

Ya sea que tenga tags h1 , h2 o p coloque esto alrededor de su texto:

 

The Text you want to make responsive

Esto representa un texto de 22 puntos en un escritorio y todavía es legible en el iPhone.