Taille de police réactive en CSS
J'ai créé un site en utilisant la grille de Zurb Foundation 3 . Chaque page a un grand h1:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->Lorsque je redimensionne le navigateur à la taille d'un mobile, la police de grande taille ne s'ajuste pas et oblige le navigateur à inclure un défilement horizontal pour prendre en charge le texte de grande taille.
J'ai remarqué que sur la Zurb Foundation 3 typographie exemple de page , les en-têtes s'adaptent au navigateur à mesure qu'il est compressé et étendu.
Est-ce que je manque quelque chose de vraiment évident? Comment puis-je y arriver?
Le font-size ne répondra pas comme cela lors du redimensionnement de la fenêtre du navigateur. Au lieu de cela, ils répondent aux paramètres de zoom/taille du navigateur, comme si vous appuyez sur ctrl et + ensemble sur le clavier lorsque vous êtes dans le navigateur.
Requêtes avec les médias
Vous devriez envisager d'utiliser requêtes de support pour réduire la taille de la police à certains intervalles où il commence à casser votre conception et à créer des barres de défilement.
Par exemple, essayez d’ajouter ceci dans votre CSS en bas, en modifiant la largeur de 320 pixels chaque fois que votre conception commence à casser:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Longueurs en pourcentage de la fenêtre de visualisation
Vous pouvez également utiliser longueurs en pourcentage de la fenêtre comme vw, vh, vmin et vmax. Le document officiel du W3C à ce sujet indique:
Les longueurs en pourcentage de la fenêtre de visualisation sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, ils sont mis à l'échelle en conséquence.
Encore une fois, à partir du même document W3C, chaque unité individuelle peut être définie comme suit:
unité vw - égale à 1% de la largeur du bloc contenant initial.
unité vh - égale à 1% de la hauteur du bloc contenant initial.
vmin unit - Égal au plus petit de vw ou vh.
vmax unit - Égal au plus grand de vw ou vh.
Et ils sont utilisés exactement de la même manière que toute autre valeur CSS:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
La compatibilité est relativement bonne, comme on peut le constater ici . Cependant, certaines versions de IE et Edge ne prennent pas en charge vmax. De plus, iOS 6 et 7 ont un problème avec l’unité vh, qui a été corrigée dans iOS 8.
Vous pouvez utiliser la valeur de la fenêtre d'affichage au lieu de ems, pxs ou pts.
1vw = 1% de la largeur de la fenêtre
1vh = 1% de la hauteur de la fenêtre
1vmin = 1vw ou 1vh, le plus petit des deux
1vmax = 1vw ou 1vh, selon la valeur la plus grande
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
de Css-astuces: http://css-tricks.com/viewport-sized-typography/
Utilisez les spécificateurs CSS media (c'est ce qu'ils utilisent [zurb]] pour un style réactif:
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
J'ai essayé de trouver des moyens de surmonter ce problème et je pense avoir trouvé une solution:
Si vous pouvez écrire votre application pour IE9 + et tous les autres navigateurs modernes prenant en charge les unités CSS calc (), rem et vmin, vous pouvez utiliser ceci pour obtenir du texte redimensionnable sans requêtes de média:
body {
font-size: calc(0.75em + 1vmin);
}
Le voici en action: http://codepen.io/csuwldcat/pen/qOqVNO
Si cela ne vous dérange pas d'utiliser une solution jQuery, vous pouvez essayer le plugin TextFill
jQuery TextFill redimensionne le texte pour l'adapter à un conteneur et rend la taille de la police la plus grande possible.
Il y a plusieurs façons d'y parvenir
Utilisez la requête multimédia mais nécessite des tailles de police pour plusieurs points d'arrêt
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
Utilisez les dimensions dans % ou em . Il suffit de changer la taille de la police de base, tout va changer. Contrairement à la version précédente, vous pouvez simplement changer la police du corps et non pas h1 à chaque fois, ou laisser la taille de la police de base à la valeur par défaut du périphérique et laisser le tout en place.
- “Ems” (em) : “em” est une unité évolutive. Un em est égal à la taille de police actuelle. Par exemple, si la taille de police du document est de 12 pt, 1em est égal à 12 pt. Les ems sont de nature évolutive, donc 2em équivaut à 24pt, .5em à 6pt, etc.
- Pourcentage (%) : L’unité de pourcentage est très semblable à l’unité "em", à l’exception de quelques différences fondamentales. Avant tout, la taille de la police actuelle est égale à 100% (soit 12 pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et l'accessibilité.
CSS3 supporte les nouvelles dimensions relatives au port de visualisation. Mais cela ne fonctionne pas sous Android
- 3.2vw = 3.2% de la largeur de la fenêtre
- 3.2vh = 3.2% de la hauteur de la fenêtre
- 3.2vmin = plus petit de 3.2vw ou 3.2vh
3.2vmax = Plus grand de 3.2vw ou 3.2vh
body { font-size: 3.2vw; }
voir css-tricks.com/.... et aussi regarder caniuse.com/....
La solution "vw" a un problème lorsque vous passez sur de très petits écrans. Vous pouvez définir la taille de la base et remonter à partir de là avec calc ():
font-size: calc(16px + 0.4vw);
Il existe une autre approche des tailles de police réactives: l’utilisation des unités rem.
html {
/* base font size */
font-size: 16px;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
Plus tard dans les requêtes multimédia, vous pouvez ajuster toutes les tailles de police en modifiant la taille de base:
@media screen and (max-width: 767px) {
html {
/* reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* you can reduce font sizes manually as well*/
h1 { font-size: 1.2rem; }
h2 { font-size: 1.0rem; }
}
Pour que cela fonctionne dans IE7-8, vous devrez ajouter une solution de repli avec des unités px:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
Si vous développez avec LESS, vous pouvez créer un mix qui fera le calcul pour vous.
Prise en charge des unités Rem - http://caniuse.com/#feat=rem
Ceci est partiellement implémenté dans la fondation 5.
dans _type.scss, ils ont deux ensembles de variables d'en-tête
// We use these to control header font sizes
//for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
Pour les moyennes entreprises, elles génèrent des tailles basées sur le premier ensemble de variables.
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
Et pour les écrans par défaut, ils utilisent un second ensemble de variables pour générer des CSS.
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
vous pouvez utiliser ces variables et remplacer dans votre fichier scss personnalisé pour définir les tailles de police pour les tailles d'écran respectives
Une taille de police réactive peut également être réalisée avec ce javascript appelé FlowType :
FlowType - Une typographie Web réactive à la perfection: la taille de la police de caractères est fonction de la largeur de l'élément.
Ou ce javascript appelé FitText :
FitText - Rend les tailles de police flexibles. Utilisez ce plugin sur votre design réactif pour le redimensionnement basé sur le ratio de vos titres.
Si vous utilisez un outil de construction, essayez Rucksack.
Sinon, vous pouvez utiliser des variables CSS (propriétés personnalisées) pour contrôler facilement les tailles de police minimale et maximale comme suit ( démo ):
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
jQuery "FitText" est probablement la meilleure solution d’en-tête responsive. Découvrez-le sur Github: https://github.com/davatron5000/FitText.js
Dans sass not scss original, vous pouvez utiliser ci-dessous mixins pour définir automatiquement le paragraphe et tous les en-têtes de police.
J'aime ça parce que c'est beaucoup plus compact. Et plus rapide à taper. Autre que cela, il fournit les mêmes fonctionnalités. Quoi qu'il en soit, si vous souhaitez toujours vous en tenir à la nouvelle syntaxe - scss, n'hésitez pas à convertir mon fichier sass en fichier scss ici: [CONVERT SASS TO SCSS ICI]
Ci-dessous je vous donne quatre mixins sass. Vous devrez ajuster leurs paramètres à vos besoins.
=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // this one only calls the other ones
Une fois que vous avez fini de jouer avec les paramètres, lancez un appel sur un mixin, à savoir: + config-and-run-font-generator (). Voir le code ci-dessous et les commentaires pour plus d'informations.
Je suppose que vous pouvez le faire automatiquement pour une requête multimédia, comme c'est le cas pour les balises d'en-tête, mais nous utilisons tous une requête multimédia différente, de sorte qu'elle ne conviendrait pas à tout le monde. J'utilise l'approche de conception d'abord mobile, c'est donc ce que je ferais. N'hésitez pas à copier et utiliser ce code.
COPIEZ ET COLLEZ CES MÉLANGES DANS VOTRE FICHIER
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // set first header element to this size
$h1-step-down: $h1-step-down // decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // looping correction
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here
CONFIGUREZ TOUS LES MIXINS À VOS BESOINS - JOUEZ AVEC! :) ET APPELEZ-LE AU-DESSUS DE VOTRE CODE SASS RÉEL:
+config-and-run-font-generator()
Cela générerait cette sortie. Vous pouvez personnaliser les paramètres pour générer différents ensembles de résultats, mais comme nous utilisons tous des requêtes de média différentes, vous devrez modifier manuellement les mixins (style et média).
CSS générée:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
Word-wrap: break-Word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}
Comme avec beaucoup de frameworks, une fois que vous avez quitté la grille et remplacé le CSS par défaut du framework, les choses vont commencer à casser. Les cadres sont intrinsèquement rigides. Si vous utilisiez le style H1 par défaut de Zurb avec ses classes de grille par défaut, la page Web devrait alors s'afficher correctement sur le mobile (c'est-à-dire sensible).
Cependant, il semble que vous souhaitiez des titres très volumineux, à savoir 6.2em, ce qui signifie que le texte devra être réduit pour pouvoir être inséré dans un affichage mobile en mode portrait. Votre meilleur choix est d’utiliser un plugin texte sensible tel que FlowType et FitText . Si vous voulez quelque chose de léger, alors vous pouvez consulter mon plugin Scalable Text jQuery:
http://thdoan.github.io/scalable-text/
Exemple d'utilisation:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
J'ai trouvé cette solution, fonctionne très bien pour moi.
/* fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
Vous pouvez y parvenir de différentes manières:
- Utilisez rem pour, par exemple. 2,3 rem
- Utilisez em par exemple 2.3em
- Utilisez% pour par exemple 2,3% De plus, vous pouvez utiliser: vh, vw, vmax et vmin.
Ces unités seront redimensionnées automatiquement en fonction de la largeur et de la hauteur de l'écran.
Une façon de résoudre le problème de l'apparence du texte sur les ordinateurs de bureau et mobile/tablette consiste à fixer la taille du texte à des unités physiques telles que des centimètres ou des pouces physiques, qui ne dépendent pas de l'écran PPI (points par pouce).
Basé sur cette réponse , voici le code que j'utilise à la fin du document HTML pour la taille de police sensible:
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
Dans le code ci-dessus, les tailles de police attribuées aux éléments de classe différente sont exprimées en unités physiques, à condition que le navigateur/système d'exploitation soit configuré correctement pour le PPI de son écran. Une police d'unités physiques n'est toujours ni trop grande ni trop petite, tant que la distance à l'écran est habituelle (distance de lecture de livre).
h1 { font-size: 2.25em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.125em; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.75em; }
Je sais que c'est une vieille question, j'avais la même question et après avoir consulté Google, j'ai vu un excellent article de CSS-Tricks . Cela fonctionne très bien. J'espère que ça aidera:
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Par exemple:
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
Nous pouvons appliquer la même équation à la propriété line-height pour la modifier également avec le navigateur.
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
Je venais juste de proposer une idée selon laquelle il suffit de définir la taille de la police une fois par élément, mais cela reste influencé par les requêtes des médias.
Tout d'abord, je règle la variable "--text-scale-unit" sur "1vh" ou "1vw" en fonction de la fenêtre d'affichage utilisant les requêtes de média.
Ensuite, j'utilise la variable en utilisant calc () et mon numéro de multiplicateur pour font-size.
/* Define variable based on the orientation. */
/* value can be customized to fit your needs. */
@media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
@media (orientation: portrait) {
:root{
--text-scale-unit: 1vw;
}
}
/* Use Variable with calc and multiplication. */
.large{
font-size: calc(var(--text-scale-unit) * 20);
}
.middle{
font-size: calc(var(--text-scale-unit) * 10);
}
.small{
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small{
font-size: calc(var(--text-scale-unit) * 2);
}<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>Dans mon exemple, je n'ai utilisé que l'orientation de la fenêtre d'affichage, mais le principe devrait être possible avec toutes les requêtes de média.
Comment trouvez-vous cette idée?
La taille du texte peut être définie avec une unité vw, qui correspond à la "largeur de la fenêtre". De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
Pour mon projet personnel, j'ai utilisé vw et @meida, cela fonctionne parfaitement
.mText {
font-size: 6vw;
}
@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
Vous pouvez rendre la taille de la police sensible si vous la définissez dans vw (largeur de la fenêtre). Cependant, tous les navigateurs ne la prennent pas en charge. La solution consiste à utiliser JS pour modifier la taille de la police de base en fonction de la largeur du navigateur et définir toutes les tailles de police en%. Voici un article décrivant comment créer des polices responsive: http://wpsalt.com/responsive-font-size-in-wordpress-theme/
J'utilise ces classes CSS, mon texte doit être fluide quelle que soit la taille de l'écran:
.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}
.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}
.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}
.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
Je crains qu'il n'y ait pas de solution facile en ce qui concerne le redimensionnement des polices. Vous pouvez modifier la taille de la police à l'aide d'une requête multimédia, mais techniquement, le redimensionnement ne sera pas fluide. Par exemple, si vous utilisez:
@media only screen and (max-width: 320px){font-size: 3em;}
Votre taille de police sera 3em pour les largeurs 300px et 200px. Mais vous avez besoin d’une taille de police plus faible pour une largeur de 200 pixels pour une réactivité parfaite.
Alors, quelle est la vraie solution? Il n'y a qu'un moyen. Vous devez créer une image png (avec un arrière-plan transparent) contenant votre texte. Après cela, vous pourrez facilement rendre votre image sensible (ex: largeur: 35%; hauteur: 28px). De cette façon, votre texte sera entièrement réactif avec tous les appareils.
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
utilisez cette équation.
Pour les valeurs supérieures ou inférieures à 1440 et 768, vous pouvez lui attribuer une valeur statique ou appliquer la même approche.
L'inconvénient de vw solution est que vous ne pouvez pas définir de rapport d'échelle, par exemple, une résolution de 5vw à la résolution d'écran 1440 peut être une taille de police de 60px, la taille de police de votre idée, mais lorsque vous réduisez la largeur de la fenêtre à 768, elle risque de finir être 12px, pas le minimum que vous voulez. Avec cette approche, vous pouvez définir votre limite supérieure et inférieure, et la police sera redimensionnée elle-même entre les deux.
Après beaucoup de conclusions je me suis retrouvé avec cette combinaison
@media only screen and (max-width: 730px) {
h2{
font-size: 4.3vw;
}
}