médias Marque CSS QUERY la taille em du document html plutôt que le navigateur?

Question

Je suis en train d'utiliser des requêtes des médias pour modifier la largeur d'un élément en morceaux en fonction de la largeur de la fenêtre (ce qui me permet d'augmenter le nombre de colonnes sur la page sans la largeur des colonnes changeantes). Je voudrais être en mesure de le faire en utilisant em est au lieu de pixels afin que tout regarder à droite si vous changez la taille de la police. Cependant, si j'utilise ce qui suit:

html {
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/
}

@media screen and (min-width: 42em) {
    div#page {
        width: 42em;
    }
}

La requête multimédia déclenche lorsque la largeur minimale des tronçons de fenêtre 42 * 16px, la taille de la police par défaut pour mon navigateur (Safari), tandis que la largeur de la page div # sera 42 * 12px, héritant de la taille de la police de l'élément html. Je voudrais vraiment que pour les requêtes des médias à se déclenchent en fonction de la largeur du texte que je me sers, est-il un moyen de faire ce travail?

Answer 1

Non, vous ne pouvez pas, parce que dans une requête de médias, « Les unités relatives dans les requêtes des médias sont basées sur la valeur initiale, ce qui signifie que les unités ne sont jamais basées sur les résultats des déclarations. Par exemple, en HTML, le « em » unité est par rapport à la valeur initiale de la «taille de la police. » (Spécification des médias requête, clause 6 unités ). La valeur initiale de font-size est medium, qui est mappé à une taille physique d'une manière dépendant du navigateur (indépendamment de tout ce que vous pouvez définir en CSS).

Les conclusions dépendent de la façon dont vous définissez la taille de la police. Si vous définissez la taille de la police de l'élément racine en pixels, il est logique d'utiliser des pixels dans les requêtes des médias, aussi, puisque l'utilisation de em ne fournirait pas de flexibilité. Si vous définissez la taille de la police de l'élément racine en pourcentage, il est logique d'utiliser em dans les requêtes des médias, mais il vous suffit de prendre en compte que em signifie la taille de la police par défaut du navigateur là-bas et vous devez sélectionner en conséquence le multiplicateur de em.

Answer 2

De W3C (http://www.w3.org/TR/CSS21/syndata.html)
L'unité « em » est égale à la valeur calculée de la propriété « font-size » de l'élément sur lequel il est utilisé. L'exception est lorsque 'em' se produit dans la valeur de la 'font-size' propriété elle-même, dans ce cas, il fait référence à la taille de la police de l'élément parent .

html { font-size:1em; width:42em; }
body { font-size:1.6em; }

@media screen and (max-width:40em) {
    div#page { font-size:0.875em; } /* 14px font */
}

Note: 42em sera probablement jamais 100% de la largeur de la fenêtre du navigateur. Si vous modifiez le @media d'agir différemment pour différentes largeurs d'écran (max-width:1200px), (max-width:1024px) vous aurez probablement plus de l'effet que je pense que vous êtes après.

Answer 3

Je viens d'être à la recherche pour la même chose, et il n'y a pas autant que je sache moyen de modifier la « native » font-size du navigateur / appareil; mais cela est en fait bien si vous regardez une certaine manière.

Les médias-requête et la balise html --Si ensemble dans units-- relatives font référence au même numéro de base sur un appareil donné ou d'un navigateur (dans le cas des navigateurs de bureau, il est 16px, mais peut être différent sur d'autres appareils ou si l'utilisateur change son zoom).

Donc, si vous définissez votre code html texte taille en pourcentage ou em mesure de cette valeur (pour l'équivalent de bureau de 12px, l'utilisation de 75% ou 0.75em), puis définissez vos requêtes médiatiques basées sur la division de la largeur de pixel par cette valeur (pour l'équivalent de bureau de 960px, l'utilisation 60em), tout devrait tomber à placer sur tous les appareils à tous les niveaux de zoom.

Voir aussi ce lien