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

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

Probado también puntos y porcentajes. Nada funciona como lo necesito ...

Dame un indicio de cómo proceder, por favor.

Fuente

2012-08-02 barakuda28

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

Puede asignarlo manualmente de acuerdo con el tamaño de pantalla de la pantalla. Simplemente tenga un aspecto de diferentes tamaños de pantalla y agregue manualmente el tamaño de la fuente.

Fuente

2012-08-02 12:48:28

+11

Nota importante: Debe agregar esto a su cabezal html. '' También puede usar 'max-width' en lugar de' max-device-width' para una sensación más 'receptiva'. – Sheharyar

@ user65165 ¿No entiendo lo que intentas decir? –

Usted puede tratar de esta herramienta: http://fittextjs.com/

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

Fuente

2012-08-02 12:43:00 CoderJK

Puede utilizar em, %, px. Pero en combinación con media-queriesSee this Link para obtener más información sobre las consultas de los medios. Además, CSS3 tiene algunos valores nuevos para determinar el tamaño del tamaño de la ventana gráfica actual: vw, vh y vmin. Ver link sobre eso.

Fuente

2012-08-02 12:45:58

+12

'vw' , 'vh',' vmin' rock esta respuesta. –

Esta es la respuesta correcta ahora, dado que las unidades de visualización son compatibles con cada * navegador: http://caniuse.com/#feat=viewport-units. – cazzer

he desarrollado una buena solución JS - que es adecuado para HTML totalmente sensible (es decir HTML construido con porcentajes)

sólo uso "em" para definir los tamaños de fuente. tamaño de la fuente

html se establece en 10 píxeles:

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

que llamar a una función de cambio de tamaño de fuente-en el 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+'%'); 
}

Fuente

2013-07-24 21:54:57

solución interesante, no está mal. He probado que he aprendido haciendo cómo uso, pero Con esto fijo en texto de tamaño 10px en ventanas de tamaño maxW, ¿está bien? pero esto? ¿Qué es "16" ¿Qué es esto? var fpc = fw * 100/16; –

verifique mi variación http://stackoverflow.com/a/39352651/189411 –

Hay varias formas de lograr esto

Uso medios de consulta 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 las dimensiones en % o em. Simplemente cambie el tamaño de la fuente base, todo cambiará. A diferencia de la anterior sólo podría cambiar la fuente del cuerpo y cada vez que no h1 o dejar que el tamaño de la fuente base a los valores predeterminados del dispositivo y descansar todo en em

“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.
Porcentaje (%): El porcentaje de unidad es muy parecido 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 apoya nuevas dimensiones que son relativas para ver puerto. Pero esto no funciona en androide

3.2vw = 3,2% de la anchura 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 = grande de 3.2vw o 3.2vh
```
body 
{ 
    font-size: 3.2vw; 
} 
```

ver css-tricks.com/.... y también un vistazo a caniuse.com/....

Fuente

2014-02-24 07:41:08 aWebDeveloper

No estoy seguro de por qué es esto 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 en la resolución 1280. Usted decide el valor que se quiere aquí

Fuente

2015-05-27 07:40:11 user3334188

He creado una variante de https://stackoverflow.com/a/17845473/189411

donde se puede establecer el tamaño del texto min y max en relación de minutos y el tamaño máximo del cuadro que desea "cheque" de tamaño. Además, puede verificar el tamaño del elemento dom diferente del cuadro donde desea aplicar el tamaño del texto.

Cambia el tamaño de texto entre 19px y 25px de # tamaño-2 elemento, basado en 500 píxeles y 960 píxeles de anchura de # tamaño-2 elemento

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

Cambia el tamaño de texto entre 13px y 20px de # tamaño-1 elemento , basado en 500 píxeles y de 960 anchura de elemento de cuerpo

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

código completo hay 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'); 
    }); 
});

Fuente

2016-09-06 15:22:31

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

Respuesta

Cuestiones relacionadas