comment changer la taille de la police proportionnellement à la taille de la fenêtre de changement en CSS3 ou javascript

Question

Je fais une application web et j'ai un problème avec taille de police. Comment changer la taille de police proportionnellement à la taille de la fenêtre en CSS3 ou en javascript?

Answer 1

Vous avez 3 façons de le faire:

1. Utilisation http://fittextjs.com/, mais les pages peuvent commencer à être plus lent
2. Utilisation de requêtes média
3. En utilisant ems

Maintenant, cela dépend ce que vous voulez être votre résultat final. Je passerais à l'option n ° 3.

Answer 2

Définir votre taille de la police de base (celui que vous définissez pour votre élément body css) dans px puis partout dans le reste de votre police jeu de pages tailles par rapport à celle d'une utilisant l'unité em, vous pouvez utiliser des requêtes des médias au changement les tailles de police de toutes vos pages en changeant simplement votre police de base, quelque chose comme ceci:

body { 
    font-size: 15px; 
} 
@media (max-width: 1000px) { 
    body { font-size: 1.3em; } 
} 
@media (max-width: 500px) { 
    body { font-size: 1.1; } 
} 

Answer 3

la meilleure façon de le faire est d'utiliser l'appareil vw, qui est défini comme 1/100e de la largeur de la fenêtre (d'où le nom). Ainsi, par exemple, si vous voulez que votre texte soit 4,5% de la largeur du navigateur à tout moment, vous pouvez utiliser la taille:

font-size: 4.5vw; 

... et théoriquement, qui devrait fonctionner. Malheureusement, vous trouverez, cela ne fonctionne pas comme prévu: il y a un bug dans les navigateurs WebKit (au moins) où la valeur de la taille de la police n'est pas mise à jour (bien que ce soit pour toutes les autres dimensions). Vous devez déclencher une repeindre pour que la taille de la police à changer, ce qui peut être fait en mettant à jour la z-index propriété de JavaScript:

window.addEventListener('resize', function(){ 
    document.getElementById('myEl').style.zIndex = '1'; 
}, false); 

Cela peut créer un peu de saccadées, mais cela signifie que vous ne avoir à calculer toutes les dimensions réelles en JavaScript, et vous n'avez pas besoin d'utiliser des tailles «étagées» comme avec les requêtes de médias.

Answer 4

La manière idéale de le faire est de combiner entre les requêtes de taille de police VW et @media. Les raisons sont les suivantes:

1) em pour lui-même ne sera pas RESCALE par la taille de la fenêtre

2) vm pour lui-même sera trop petit pour les résolutions/écrans inférieurs à 800px.

Ainsi, la bonne façon d'y parvenir est:

• Définition d'une classe - prop texte avec VM = 1.0 pour la largeur de votre écran désiré
• Ajouter requêtes médiatiques pour adapter à la taille de la police avec votre choix grilles de résolution inférieure.

Pour ma grille réactive (qui fixe une colonne de 1/2 à prendre une largeur de 100% au-dessous 768px de largeur), il ressemble à ça:

<style> 
    .prop-text{font-size:1.0vw} 
    @media (max-width : 768px) { 
    .prop-text{font-size:2.0vw} 
    } 
    /*other media queries here - fit font size to smartphone resolutions */ 
</style> 

<div class="prop-text">your text is here</div>