Augmenter le remplissage des éléments à mesure que la largeur du navigateur diminue

Question

Le comportement par défaut de remplissage dans CSS se comporte comme prévu et n'augmentera pas lorsque la largeur du navigateur est réduite. Dans l'extrait ci-dessous une valeur basée sur le pourcentage pour le remplissage diminuer comme largeur diminue comme attendu.

html { 
 
    background-color: #f8f8f8; 
 
    font-family: Arial; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    background-color: #fe0; 
 
    padding: 4%; 
 
}

<h1>Highlighted Text</h1>

J'ai appris quelques techniques de CSS intéressantes en utilisant calc et vw, vh, etc. valeurs à faire un comportement non standard intéressant.

Puis-je inverser le comportement par défaut et Rembourrage augmentation tandis que largeur diminue (Ou au moins créer une illusion de ce) en utilisant CSS?

EDIT: Je suis également au courant des requêtes de médias, mais je veux que cette transition soit lisse comme le remplissage par défaut.

Answer 1

Ici, vous allez :)

html { 
 
    background-color: #f8f8f8; 
 
    font-family: Arial; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    background-color: #fe0; 
 
    padding: calc(50px - 4%); 
 
}

<h1>Highlighted Text</h1>