Come rendere la dimensione del font relativa al div principale?

Voglio che il testo all'interno del mio div per rimanere la stessa dimensione nel rapporto di proporzione % a un div padre. I.E. Voglio che il mio testo abbia il font-size del 50% della larghezza dei genitori. Pertanto, quando le dimensioni della pagina cambiano, il testo rimane sempre della stessa dimensione in %.Come rendere la dimensione del font relativa al div principale?

Ecco di cosa sto parlando:

.counter-holder{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t width:90%; 
 
\t height:20%; 
 
\t top: 70%; 
 
\t left: 50%; 
 
\t /* bring your own prefixes */ 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 

 
.counter-element-box{ 
 
\t position:relative; 
 
\t vertical-align: text-top; 
 
\t border-style: solid; 
 
    border-width: 1px; 
 
    width: 20%; 
 
    height: 100%; 
 
    float:left; 
 
    margin: 6%; 
 
} 
 

 
.counter-element-text{ 
 
\t position:absolute; 
 
\t top:50%; 
 
\t width: 50%; 
 
\t max-width:50%; 
 
\t display: inline-block; 
 
\t height:100%; 
 
\t margin-left:50%; 
 
\t font-size : 80%;overflow: hidden; 
 
} 
 

 
.counter-element-value{ 
 
\t position:absolute; 
 
\t top:50%; 
 
\t width: 50%; 
 
\t max-width:50%; 
 
\t display: inline-block; 
 
\t height:100%; 
 
\t padding-left:30%; 
 
\t font-size : 80%;overflow: hidden; 
 
}

<div class="counter-holder"> 
 
\t <div class="counter-element-box"> 
 
\t \t <div id="years" class="counter-element-value"> 
 
\t \t \t 0 
 
\t \t </div> 
 
\t \t <div class="counter-text counter-element-text" > 
 
\t \t  Years 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="counter-element-box"> 
 
\t \t <div id="missions" class="counter-element-value"> 
 
\t \t \t 0 
 
\t \t </div> 
 
\t \t <div class="counter-text counter-element-text" > 
 
\t \t  Missions 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="counter-element-box"> \t 
 
\t \t <div id="team" class="counter-element-value"> 
 
\t \t \t 0 
 
\t \t </div> 
 
\t \t <div class="counter-text counter-element-text" > 
 
\t \t  \t Team 
 
\t \t </div> 
 
\t </div> \t \t  \t 
 
</div>

Esegui questo frammento a schermo intero e provare a ridimensionare la pagina e vedere come le dimensioni del testo sta cambiando e non il montaggio all'interno del div frontiere. Come posso evitare che ciò accada, quindi rimane sempre all'interno dei confini?

fonte

2015-06-07 Tachi

Sei sicuro di voler modificare il ta 'font-size'and non il' width'? – Core972

Ho fatto entrambe le cose, non aiuta. Oltre a lasciare una delle opzioni. Il testo viene ancora ridimensionato. – Tachi

C'è una domanda simile con una varietà di buone risposte su https://stackoverflow.com/q/10292001/2615878. – Theophilus

-1

L'utilizzo di font-size: x% non è relativo alla larghezza del genitore ma alla dimensione del carattere che l'elemento avrebbe normalmente.

Quindi, se genitore del vostro elemento imposta font-size: 12px poi font-size: 50% nell'elemento significa che elemento ha una font-size di 6px

Ciò che si vuole utilizzare è viewport percentage: vw

ad esempio: font-size: 2vw

.counter-holder{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t width:90%; 
 
\t height:20%; 
 
\t top: 70%; 
 
\t left: 50%; 
 
\t /* bring your own prefixes */ 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 

 
.counter-element-box{ 
 
\t position:relative; 
 
\t vertical-align: text-top; 
 
\t border-style: solid; 
 
    border-width: 1px; 
 
    width: 20%; 
 
    height: 100%; 
 
    float:left; 
 
    margin: 6%; 
 
} 
 

 
.counter-element-text{ 
 
\t position:absolute; 
 
\t top:50%; 
 
\t display: inline-block; 
 
\t margin-left:40%; 
 
\t font-size : 2vw;overflow: hidden; 
 
} 
 

 
.counter-element-value{ 
 
\t position:absolute; 
 
\t top:50%; 
 
\t width: 50%; 
 
\t max-width:50%; 
 
\t display: inline-block; 
 
\t height:100%; 
 
\t padding-left:30%; 
 
\t font-size : 2vw;overflow: hidden; 
 
}

<div class="counter-holder"> 
 
\t \t \t 
 
\t \t \t <div class="counter-element-box"> 
 
\t \t \t \t <div id="years" class="counter-element-value"> 
 
\t \t \t \t \t 0 
 
\t \t  \t </div> 
 
\t \t  \t <div class="counter-text counter-element-text" > 
 
\t \t  \t \t Years 
 
\t \t  \t </div> 
 
\t  \t </div> 
 
\t  \t <div class="counter-element-box"> 
 
\t \t  \t <div id="missions" class="counter-element-value"> 
 
\t \t \t \t \t 0 
 
\t \t  \t </div> 
 
\t \t  \t <div class="counter-text counter-element-text" > 
 
\t \t  \t \t Missions 
 
\t \t  \t </div> 
 
\t  \t </div> 
 
\t \t  <div class="counter-element-box"> \t 
 
\t \t  \t <div id="team" class="counter-element-value"> 
 
\t \t \t \t \t 0 
 
\t \t  \t </div> 
 
\t \t  \t <div class="counter-text counter-element-text" > 
 
\t \t  \t \t Team 
 
\t \t  \t </div> 
 
\t  \t </div> \t \t  \t 
 
</div>

fonte

2015-06-07 13:33:44

Grande spiegazione, mai sentito prima di '' 'vw'''. – Tachi

+60

Non è 'vw' e' vh' la dimensione della finestra della vista, non è genitore? – bryan

+11

In effetti, questa risposta non avrebbe dovuto essere contrassegnata come valida! Suppongo che tu abbia bisogno di un po 'di javascript per ridimensionare il testo rispetto a un genitore, ma le unità viewport non sono sicuramente il modo per ottenere questo risultato. – MrMerrick

-3

È possibile utilizzare le unità viewport per ridimensionarle con la finestra. 100vw è la larghezza della finestra intera e 100vh - altezza.

.resizable-text { 
 
    font-size: 50vw; 
 
}

<div class="resizable-text"> 
 
    Text 
 
</div>

fonte

2015-06-07 13:41:02 Tigran

-2

Il modo risolto questo problema è stato quello di usare javascript per misurare il contenitore e quindi impostare la dimensione del carattere px su quel contenitore. Una volta impostata la linea di base per il contenitore, il relativo dimensionamento dei caratteri di tutto il contenuto verrà ridimensionato correttamente utilizzando em o%.

sto usando Reagire:

<div style={{ fontSize: width/12 }} > 
    ... 
</div>

CSS:

div { 
    font-size: 2em; 
}

fonte

2017-10-23 21:53:50 JamieR

Come rendere la dimensione del font relativa al div principale?

risposta

Problemi correlati