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

Question 1

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.

Question 2

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

Question 3

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.

Question 4

Nueva manera

Hay varias formas de lograrlo.

CSS3 admite nuevas dimensiones relativas al puerto de visualización. Pero esto no funciona en Android.

3.2vw = 3.2% del ancho de la ventana gráfica
3.2vh = 3.2% de la altura de la ventana gráfica
3.2vmin = menor de 3.2vw o 3.2vh
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

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;
   }
}

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

Question 5

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

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

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

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

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+'%');
}

Question 6

Puede probar esta herramienta: http://fittextjs.com/

No he usado esta segunda herramienta, pero parece similar: https://github.com/zachleat/BigText

Question 7

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í

Question 8

Esto funcionó para mí:

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

Explicado en detalle aquí: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

Question 9

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');
    });
});

Question 10

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

Question 11

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