Comment puis-je créer une base de taille de police dynamique en fonction de la taille de l'élément parent?

Question

Voici mon code:

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width:50px; 
 
    height: 20px; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>

Je n'ai pas mis font-size propriété à elle. Maintenant, je veux savoir, puis-je définir un font-size dynamique? Je veux dire, je veux un plus grand font-size pour celui-ci:

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width:90px; 
 
    height: 25px; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>

En raison de plus à la fois width et height pour <li> dans le deuxième extrait de code. Est-ce possible?

Answer 1

Qu'en est-il de l'utilisation vw? Voir violon et redimensionner la fenêtre https://jsfiddle.net/d456eLwt/

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width: 20vw; 
 
    font-size: 5vw; 
 
    line-height: 5vw; 
 
    height: 5vw; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>