La dimensione del font può essere una% della dimensione del contenitore in css/css3?

Ho un container:La dimensione del font può essere una% della dimensione del contenitore in css/css3?

<div id="container"><h1>LONG TITLE LINE</h1></div>

e css:

#container { 
    width: 50%; 
    height: 50%; 
} 

#container h1 { 
    font-size: XXXXXX; 
}

"XXXXXX" < - dove voglio la dimensione del carattere per essere basato sulla larghezza della pagina/contenitore.

DOMANDA: è possibile avere la dimensione del carattere di h1 in base alla larghezza della pagina? in css3? sono sicuro che può essere fatto usando JS, ma mi piace evitarlo se è possibile.

fonte

2012-01-26 circusdei

non credo che sia possibile in CSS, ma questo potrebbe essere interessante per voi:

http://fittextjs.com/

fonte

2012-01-26 16:30:38

ohh - è carino. verificando cosa fa alle prestazioni. – circusdei

mi sembra buono - grazie per il link! ora sull'immagine di sfondo:/ – circusdei

Non come si dice. Puoi, tuttavia, fare il contrario. La larghezza della pagina dipende dalla dimensione del carattere, se si dichiara una dimensione del carattere di base in ems, quindi utilizzare i valori em per il layout. Quindi, la larghezza aumenterebbe se aumentassi la dimensione del testo.

fonte

2012-01-26 16:21:15

e quindi si potrebbe impostare la finestra in base alle dimensioni pagina visualizzata. – circusdei

non vedo perché questo non potrebbe essere realizzato utilizzando i tag multimediali. A seconda di come granulare si voleva farlo, si potrebbe fare qualcosa di simile:

@media only screen and (min-width: 1000px){ 
    #container h1 { font-size:42px; } 
} 
@media only screen and (max-width: 1000px){ 
    #container h1 { font-size:40px; } 
} 
@media only screen and (max-width: 900px){ 
    #container h1 { font-size:35px; } 
} 
@media only screen and (max-width: 800px){ 
    #container h1 { font-size:30px; } 
} 
@media only screen and (max-width: 700px){ 
    #container h1 { font-size:25px; } 
} 
@media only screen and (max-width: 600px){ 
    #container h1 { font-size:20px; } 
} 
@media only screen and (max-width: 500px){ 
    #container h1 { font-size:15px; } 
}

Vedi l'JSFiddle here per una demo.

fonte

2014-03-10 14:34:20 adamdport

Un'altra dependng opzione il layout è quello di utilizzare vw unità:

vw:. 1/100esimo della larghezza della finestra (source MDN)

Se la larghezza #container è impostato come percentuale della finestra, font-size si adatterà alla sua larghezza:

DEMO

CSS:

#container h1 { 
    font-size: 5vw; 
}

Browser supportati per vw unità è IE9 +, vedere canIuse per maggiori informazioni.

fonte

2014-07-19 09:02:33

Questa dovrebbe essere la risposta accettata, fa esattamente quello che l'OP chiedeva senza plug-in. – adamdport

Esattamente quello di cui ho bisogno senza plugin! – Sushant

Questo non è ciò che l'OP stava chiedendo. le unità di viewport si ridimensionano con il viewport (da cui il loro nome). Quello che OP sta cercando (e molto probabilmente molti altri) è il ridimensionamento basato su un contenitore. Due cose completamente diverse –

La mia soluzione crea una variabile CSS che esprime l'altezza del contenitore relativa al viewport, in unità "vh", questa variabile può quindi essere utilizzata con la funzione "calc" di CSS3 per calcolare l'altezza del carattere come percentuale del altezza del contenitore.

le dimensioni del contenitore si misura ogni volta che la finestra (finestra) viene ridimensionata

<html> 
     <head> 
      <style> 
       .container { 
        width:100%; 
        /* 
         any rules you like to set the dimensions of the container 
        */ 
        top:40px; 
        height:30vh; 

        border:1px solid red; 
        white-space:nowrap; 
       } 
      </style> 
      <script> 
        function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement) 
        { 
         var element 
         /* 
          the "immutableElement" parameter is 
           true when the container is never recreated, 
           false if its generated dynamicaly 
         */ 
         if(immutableElement === true) { 
          element = document.querySelector("." + elementClassName) 
         }     

         var onResize = function() { 
          if(immutableElement !== true) { 
           element = document.querySelector("." + elementClassName) 
          } 

          if(element != undefined) { 
           var elementHeight = element.offsetHeight 
           var elementVH = (elementHeight/window.innerHeight) * 100 
           element.style.setProperty(cssVariableName, elementVH + "vh") 
          } 
         } 
         onResize() 
         window.onresize = onResize 
        } 
      </script> 
     </head> 
     <body> 
      <div class="container"> 
       <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span> 
       <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span> 
       <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span> 
      </div> 
     </body> 

     <script> 
      setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true) 
     </script> 
    </html>

JSFiddle

fonte

2017-04-19 23:33:58

La dimensione del font può essere una% della dimensione del contenitore in css/css3?

risposta

Problemi correlati