web-dev-qa-db-fra.com

Comment réduire la taille de la police lorsque je redimensionne le navigateur

Je suis en train de faire un site web avec html5 et css. J'essaie de rendre ce site réactif, mais je ne sais pas pourquoi la taille de la police reste la même lorsque je redimensionne la fenêtre du navigateur, même lorsque j'utilise em ou percentages, tels que: font-size: XXem ou font-size: XX%.

Comment puis-je rendre la police redimensionnable?

htmlcsshtml5css3fonts
15
user2804038

Pour les pages Web HTML5, je vous suggère fortement d'utiliser les valeurs Largeur/Hauteur du point de vue. Elles fonctionnent de manière similaire à% mais sont des tailles de police qui redimensionnent avec la fenêtre.

Par exemple...

.some-paragraph{
    font-size: 5vw;
}

Cela définirait la taille de la police de manière à toujours correspondre à 5% de la largeur de la fenêtre d'affichage actuelle, même en cas de redimensionnement!

En savoir plus ici: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Remarque: Vous devrez peut-être avoir ceci dans votre tête:

 <meta name="viewport" content="initial-scale=1">
38
Victor3y

Ça s'appelle responsive

@media screen and (max-width: 1024px) {
your font  style goes here

}

@media screen and (max-width: 950px) {
 your font  style goes here

}


@media screen and (max-width: 650px) {
 your font  style goes here


}

@media screen and (max-width: 480px) {
 your font  style goes here

}
7
San

Vous devez absolument utiliser CSS media interrogers pour un style basé sur une plage de ratios d’écran et de spécifications, mais voici un exemple utilisant les unités rem et jQuery pour réduire la police lorsque vous redimensionnez la largeur du navigateur. Fiddle ici .

CSS

html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }

JavaScript/jQuery

$(document).ready(function () {
    var holdWidth = $(window).width();
    $(window).on('resize', function () {
        newPercentage = (($(window).width() / holdWidth) * 100) + "%";
        $("html").css("font-size", newPercentage)
    });
});

et voici un exemple faisant la moyenne de la largeur et de la hauteur du nouveau pourcentage de taille de police:

$(document).ready(function () {
    var holdWidth = $(window).width();
    var holdHeight = $(window).height();
    var holdAverageSize = (holdWidth + holdHeight) / 2;
    $(window).on('resize', function () {
        newAverageSize = ($(window).width() + $(window).height()) / 2;
        newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
        $("html").css("font-size", newPercentage)
        console.log(newPercentage);
    });
});
2
Space Age Crystal

Vérifiez vos requêtes multimédia, elles devraient contrôler votre taille de police si vous utilisez des techniques réactives.

Un exemple de code aiderait.

Donnez un coup de rem. Fonctionne mieux que% ou em.

http://snook.ca/archives/html_and_css/font-size-with-rem

2
fauverism
.text {
    font-size: 50px;
}


@media only screen 
and (min-width : 300px)
and (max-width : 500px) {

   .text {
    font-size: 20px;
   }

}

    @media only screen 
    and (min-width : 500px)
    and (max-width : 800px) {

       .text {
        font-size: 30px;
       }

    }

</style>


<div class="text">Test Text</div>
1
user3024320

vous pouvez résoudre ce problème en utilisant @media query's et une fenêtre d'affichage dans votre css, puis en ajoutant cette balise META à votre code HTML:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

et avec la requête @media et la fenêtre d'affichage, vous déclarez quelle taille vous avez par largeur d'écran à l'aide de cette requête multimédia + fenêtre d'affichage en css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

            // your css for screens between 820 and 920 pixels in width goes here

  }

j'utilise principalement les valeurs suivantes: de 20 à 600, 600 à 700, 700 à 820, 820 à 920, 920 à 1200, écran @media et (largeur minimale: 1200px) {@viewport {width: 1200px; } (ce dernier définira la taille de tout écran de plus de 1200 px de large afin que le code de la plus grande version soit valide ici}

Cela signifie donc que vous aurez 6 fois votre code CSS qui est adapté sera adapté à la taille.

C'est ce qu'on appelle la conception adaptative ou réactive et il est assez facile à faire

Pour plus d'informations, vous pouvez vérifier ceci http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

1
Reynderke

Comment spécifiez-vous votre taille de police de base (par rapport à vos balises html ou body dans votre fichier CSS)? Si vous définissez cette valeur sur un pixel (ou une autre mesure fixe) ou si vous héritez de la taille de police par défaut du navigateur, votre pourcentage ou les valeurs em seront toujours égaux à un pourcentage de ces valeurs par défaut.

L’approche la plus courante pour la création de sites réactifs consiste à utiliser une approche «mobile d’abord», selon laquelle votre feuille de style par défaut gère le style de base de votre site sur un petit écran, puis utilise des requêtes multimédia en CSS pour ajuster les styles à mesure que la taille de l’écran augmente. Utilisez-vous actuellement des requêtes multimédia/des points d'arrêt?

0
steve

taille de la police: 25vmin;

C'était une très bonne police de redimensionnement en hauteur et en largeur. 
Vous n'avez besoin de rien dans la tête.

0
user4565320