¿Tamaño de fuente relativo a la resolución de pantalla del usuario?

84

Tengo un sitio web fluido y el menú tiene el 20% de su ancho. Quiero que el tamaño de fuente del menú se mida correctamente para que siempre se ajuste al ancho del cuadro y nunca pase a la siguiente línea. Estaba pensando en usar "em" como una unidad, pero es relativo al tamaño de fuente del navegador, así que cuando cambio las resoluciones, el tamaño de fuente permanece igual.

Probé también ptos y porcentajes. Nada funciona como lo necesito ...

Dame una pista de cómo proceder, por favor.

css measurement barakuda28
fuente

Respuestas:

51 
@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

Puede asignarlo manualmente de acuerdo con el tamaño de pantalla de la pantalla. Solo tenga un aspecto de diferente tamaño de pantalla y agregue manualmente el tamaño de fuente.

Arpit Srivastava
fuente
16
Nota importante: debe agregar esto a su encabezado html. <meta name="viewport" content="width=device-width" /> También puede usarlo en max-widthlugar de max-device-widthpara una sensación más 'receptiva'.
Sheharyar
@ user65165 ¿No entendí lo que intentas decir?
Arpit Srivastava
max-device-width no funciona. Solo el ancho máximo funciona cuando ajusto la pantalla del navegador.
Ramisa Anjum Aditi
54

Se puede utilizar em, %, px. Pero en combinación con media-queries Vea este enlace para obtener información sobre las consultas de medios. Además, CSS3 tiene algunos valores nuevos para el dimensionamiento de las cosas en relación con el tamaño de la ventana gráfica actual: vw, vh, y vmin. Ver enlace sobre eso.

Miljan Puzović
fuente
28
vw, vh, vminRock esta respuesta.
Frank Lämmer
1
Esta es la respuesta correcta ahora, dado que las unidades de visualización son compatibles con todos los * navegadores: caniuse.com/#feat=viewport-units .
cazzer
no olvidesvmax
live2
32

Nueva manera

Hay varias formas de lograrlo.

CSS3 admite nuevas dimensiones relativas al 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 = menor de 3.2vw o 3.2vh

  4. 3.2vmax = Mayor de 3.2vw o 3.2vh

    body
{
    font-size: 3.2vw;
}

vea css-tricks.com / .... y también busque en caniuse.com / ....

Vieja forma

  1. Use media query pero requiere tamaños de fuente para varios puntos de interrupción

    body
{
    font-size: 22px; 
}
h1
{
   font-size:44px;
}

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

  2. Utilice dimensiones en % o rem . Simplemente cambie el tamaño de fuente base, todo cambiará. A diferencia del anterior, puede cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de fuente base sea el predeterminado del dispositivo y descanse todo en em.

    • “Root Ems” (rem) : el “rem” es una unidad escalable. 1rem es igual al tamaño de fuente del cuerpo / html, por ejemplo, si el tamaño de fuente del documento es 12 puntos, 1em es igual a 12 puntos. Root Ems es de naturaleza escalable, por lo que 2em equivaldría a 24pt, .5em equivaldría a 6pt, etc.

    • Porcentaje (%) : La unidad de porcentaje es muy parecida a la unidad "em", salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12 puntos = 100%). Mientras usa la unidad de porcentaje, su texto permanece completamente escalable para dispositivos móviles y para accesibilidad.

ver kyleschaeffer.com / ....

aWebDeveloper
fuente
font-size: 3.2vw funcionó en mi caso. Aunque no estoy seguro de la compatibilidad con el navegador.
manpikin
"Un em es igual al tamaño de fuente actual, por ejemplo, si el tamaño de fuente del documento es 12 puntos, 1 em es igual a 12 puntos". En realidad, emes relativo al tamaño de fuente del contenedor. Esto puede llevar a un comportamiento inesperado cuando el contenedor también tiene su tamaño de fuente configurado en em... Para obtener el tamaño relativo a la fuente del documento, use rem.
Stijn de Witt
19

Desarrollé una buena solución JS, que es adecuada para HTML totalmente receptivo (es decir, HTML construido con porcentajes)

  1. Solo uso "em" para definir tamaños de fuente.

  2. El tamaño de fuente html se establece en 10 píxeles:

    html {
  font-size: 100%;
  font-size: 62.5%;
}

  3. Llamo a una función de cambio de tamaño de fuente en documento listo:

// esto requiere JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}
Elad Ziv
fuente
solución interesante, no está mal. Probé, aprendí haciendo cómo lo uso, pero con esto arreglé en texto de tamaño 10px en ventanas de tamaño maxW, ¿está bien? ¿pero esto? que es "16" que es esto? var fpc = fw * 100/16;
Domenico Monaco
5

No estoy seguro de por qué es tan complicado. Haría este javascript básico

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Donde 12 significa 12px a una resolución de 1280. Tu decides el valor que quieres aquí

usuario3334188
fuente
2

Creé una variante de https://stackoverflow.com/a/17845473/189411

donde puede establecer el tamaño de texto mínimo y máximo en relación con el tamaño mínimo y máximo de la casilla que desea "comprobar" el tamaño. Además, puede verificar el tamaño del elemento dom diferente al cuadro donde desea aplicar el tamaño del texto.

Cambia el tamaño del texto entre 19px y 25px en el elemento # size-2, basado en el ancho de 500px y 960px del elemento # size-2

resizeTextInRange(500,960,19,25,'#size-2');

Cambia el tamaño del texto entre 13px y 20px en el elemento # size-1, según el ancho de 500px y 960px del elemento del cuerpo

resizeTextInRange(500,960,13,20,'#size-1','body');

el código completo está ahí https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});
Domenico Mónaco
fuente
1

No usar consultas de medios es bueno porque permite escalar el tamaño de fuente gradualmente.

El uso de vwunidades ajustará el tamaño de la fuente en relación con el tamaño del puerto de visualización.

La conversión directa de vwunidades a tamaño de fuente hará que sea difícil llegar al punto óptimo tanto para resoluciones móviles como de escritorio.

Recomiendo probar algo como:

body {
    font-size: calc(0.5em + 1vw);
}

Crédito: CSS en profundidad

Itai Noam
fuente
0 
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

Espero que esto sea de ayuda. Estoy usando esta fórmula para mi juego de fase.

pavan kumar
fuente