Comment faire de la taille de police quand j'ai redimensionner le navigateur

Il est appelé Réactif

@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

}

OriginalL'auteur San

Vous devriez certainement utiliser CSS media queries de style basé sur une gamme d'écran ratios et les spécifications, mais voici un exemple utilisant à la fois des rem parts et jQuery pour rendre la police plus petite lorsque vous redimensionnez la largeur du navigateur. Violon 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 calcul de la moyenne à la fois la largeur et la hauteur de la nouvelle taille de police pourcentage:

$(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);
    });
});

OriginalL'auteur Space Age Crystal

vous pouvez résoudre ce problème en utilisant @requête de média et d'une fenêtre viewport dans votre css , et d'ajouter cette balise meta dans votre code html:

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

et avec le @media de la requête et de la fenêtre d'affichage vous déclarer de quelle taille vous avez par la largeur de l'écran à l'aide de cette requête de média + fenêtre d'affichage 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'ai surtout l'utilisation de la valeur : du 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(cette dernière définition de la taille de l'écran plus grand que 1200 px de largeur de sorte que votre code pour la plus grande version goeds ici}

Donc cela signifie que vous aurez 6 fois votre code css qui est adapté sera adapté à la taille.

Ce qui est appelé adaptative ou responsive design et est très facile à faire

Pour plus d'info vous pouvez consulter cette http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

OriginalL'auteur Reynderke

Comment êtes-vous en précisant votre référence de taille de police (à l'encontre de votre code html ou le corps des balises dans votre fichier CSS)? Si vous êtes à la définition de cette valeur à un pixel (ou fixe) ou à hériter d'un navigateur taille de police par défaut de votre pourcentage ou em valeurs sera toujours un pourcentage de ces valeurs par défaut.

L'approche la plus commune pour la construction de sites responsive est de faire une approche mobile first, sur laquelle votre feuille de style par défaut gère la base de style pour votre site sur un écran plus petit, puis d'utiliser les media queries CSS pour ajuster les styles comme la taille de l'écran augmente. Êtes-vous en utilisant toutes les requêtes de média/points d'arrêt actuellement?

OriginalL'auteur steve