Tengo un sitio web fluido y el menú es de 20% de su anchura. Quiero el tamaño de fuente del menú para medirse adecuadamente de manera que siempre se ajusta a la anchura de la caja y nunca se ajusta a la línea siguiente.
Yo estaba pensando en usar «em» como una unidad, sino que es relativa al navegador del tamaño de la fuente, así que cuando me cambio de resoluciones el tamaño de la fuente sigue siendo la misma.

Trató también de pts y porcentajes. Nada funciona como yo necesito…

Me dan una pista de cómo proceder, por favor.

InformationsquelleAutor barakuda28 | 2012-08-02

8 Comentarios

  1. 47
    @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;
      }
    }

    Que se le puede dar manualmente de acuerdo al tamaño de la pantalla de la pantalla.Sólo echar un vistazo de diferente tamaño de pantalla y agregar manualmente el tamaño de la fuente.

    • Nota importante: es necesario agregar esto a tu html cabeza. <meta name="viewport" content="width=device-width" /> También puede utilizar max-width en lugar de max-device-width para una más «sensible» se siente.
    • No entendía lo que estás intentando decir?
    • max-device-width no está funcionando. Sólo max-width funciona cuando me ajustar la pantalla del navegador.
  2. 45

    Puede utilizar em, %, px. Pero en combinación con media-queries Ver en este Enlace para aprender acerca de los medios de comunicación-las consultas. También, CSS3 tienen algunos de los nuevos valores para el dimensionamiento de las cosas en relación a la actual tamaño de la ventana: vw, vh, y vmin. Ver enlace acerca de eso.

    • vw, vh, vmin rock esta respuesta.
    • Esta es la respuesta correcta ahora, dado que el área de visualización de las unidades son compatibles con todos los* navegador: caniuse.com/#feat=viewport-units.
  3. 21

    Hay varias maneras de lograr esto

    Uso consulta de medios de comunicación 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;
           }
        }

    Utilizar las dimensiones en % o em. Cambiar la base de tamaño de fuente, todo va a cambiar. A diferencia de la anterior que sólo podría cambiar la fuente de cuerpo y no h1 o cada vez que vamos a la base el tamaño de la fuente predeterminada del dispositivo y el resto todo en em

    1. «Ems» (em): El «em» es una solución escalable de la unidad. Un em es igual a la corriente de tamaño de fuente, por ejemplo, si la fuente-tamaño del documento es 12pt, 1em es igual a 12 puntos. Ems son escalables en la naturaleza, por lo que 2em sería igual 24pt, .5em sería igual 6pt, etc..
    2. Por ciento (%): El porcentaje de la unidad es muy similar a los «em» unidad, salvo un par de diferencias fundamentales. En primer lugar, el actual tamaño de fuente es igual a 100% (es decir, 12pt = 100%). Mientras que utilizando el porcentaje de la unidad, el texto, que sigue plenamente escalable para dispositivos móviles y para la accesibilidad.

    ver kyleschaeffer.com/….

    CSS3 apoya la creación de nuevas dimensiones que son relativos a la vista del puerto. Pero esto no funciona en android

    1. 3.2 vw = 3.2% de la anchura de la ventanilla
    2. 3.2 vh = 3.2% de la altura de la ventanilla del
    3. 3.2 vmin = Menor de 3.2 vw o 3.2 vh
    4. 3.2 vmax = Mayor de 3.2 vw o 3.2 vh

      body
      {
          font-size: 3.2vw;
      }

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

    • font-size: 3.2 vw trabajado en mi caso. Aunque no estoy seguro acerca de la compatibilidad del navegador.
  4. 17

    He desarrollado un buen JS solución – que es adecuado para todo-responsive HTML (es decir, HTML integrado con porcentajes)

    1. Yo sólo uso el «em» para definir la fuente de los tamaños.

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

      html {
        font-size: 100%;
        font-size: 62.5%;
      }
    3. Que yo llamo una fuente-el redimensionamiento de la función en el documento-listo:

    //esto requiere de 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+'%');
    }
    • solución interesante, no está mal. Yo he probado y he aprendido haciendo ¿cómo puedo usar, pero Con este me fijo en 10px tamaño de texto en maxW tamaño de windows, ok? pero este? ¿qué es el «16» ¿qué es esto? var fpc = fw*100/16;
    • comprobar mi variación stackoverflow.com/a/39352651/189411
  5. 4

    No sé por qué es tan complicado. Me gustaría hacer esta básicos de javascript

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

    Donde 12 12 px significa en 1280 de resolución. Usted decide el valor que desee aquí

  6. 2

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

    donde se puede establecer min y max tamaño del texto en la relación de min y max tamaño de cuadro que desea «verificación» de tamaño. Además, puede comprobar el tamaño de elemento de dom diferente que el cuadro donde desea aplicar el tamaño del texto.

    Cambiar el tamaño de texto entre 19px y espacio de 25 píxeles situado en el #tamaño de 2 elementos, basados en 500px y 960px de ancho de #tamaño-2 elemento

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

    Cambiar el tamaño de texto entre 13px y 20 píxeles en #tamaño de 1 elemento, basado en 500px y 960px de ancho 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');
        });
    });

Dejar respuesta

Please enter your comment!
Please enter your name here