J'essaie d'utiliser les requêtes de média pour modifier la largeur d'un élément en morceaux en fonction de la largeur de la fenêtre (cela me permet d'augmenter le nombre de colonnes de la page sans la largeur des colonnes changeant). J'aimerais pouvoir faire cela en utilisant EM à la place des pixels afin que tout soit correct si vous changez de taille de police. Cependant, si j'utilise ce qui suit: la requête de support déclenchera lorsque la largeur minimale de la fenêtre atteint 42 * 16px, la taille de police par défaut de mon navigateur (safari), tandis que la largeur de la page DIV # 42 * 12px, hériter de la taille de la police à partir de l'élément HTML. J'aimerais vraiment que les requêtes des médias se déclenchent en fonction de la largeur du texte que j'utilise, y a-t-il un moyen de faire ce travail?
3 Réponses :
de W3C (http://www.w3.org/tr/css21/syndata.html) Remarque: 42em ne sera probablement jamais 100% de la largeur de la fenêtre du navigateur. Si vous modifiez le @media pour agir différemment pour différentes largeurs d'écran
L'unité 'EM' est égale à la valeur calculée de la propriété "Taille de police" de l'élément sur lequel elle est utilisée. L'exception est (max-largeur: 1200px) , (max-largeur: 1024px) Vous aurez probablement plus de la effet que je pense que vous êtes après.
Je viens de regarder dans la même chose, et Afaik il n'y a aucun moyen de modifier la taille de police "natif" du navigateur / périphérique; Mais c'est vraiment bon si vous regardez cela d'une certaine manière.
La requête multimédia et la balise HTML --if dans des unités relatives - se réfèrent au même numéro de base sur tout périphérique ou navigateur donné (dans le cas des navigateurs de bureau, il est 16px, mais peut être différent sur d'autres appareils ou si l'utilisateur change de zoom).
Donc, si vous définissez votre format texte HTML dans un pourcentage ou EM-mesurez-la de cette valeur (pour l'équivalent de bureau de 12px, utilisez 75% ou 0,75em), puis définissez vos requêtes de support basées sur la division de la largeur de pixel Par cette valeur (pour l'équivalent de bureau de 960px, utilisez 60em), tout devrait tomber pour placer sur chaque appareil à chaque niveau de zoom.
Voir aussi cette lien < / p>
Non, vous ne pouvez pas, car dans une requête médiatique, "les unités relatives des requêtes de média 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, l'unité "EM" est relative à la valeur initiale de "la taille de la police". " (Spécification de la requête médiatique, clause 6 unités ). La valeur initiale de Les conclusions dépendent de la manière 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 multimédias, car l'utilisation de Taille de police < / a> est moyen , qui est mappé sur une taille physique de manière dépendante du navigateur (indépendamment de tout ce que vous pouvez définir dans CSS).
em ne fournirait aucune flexibilité. Si vous définissez la taille de la police de l'élément racine sous forme de pourcentage, il est logique d'utiliser em dans les requêtes de média, mais il vous suffit de prendre en compte que em signifie que la valeur par défaut du navigateur Taille de la police là-bas et vous devez sélectionner le multiplicateur de em en conséquence.
Pouvez-vous réinitialiser la taille de la police du corps?
@Knu pensez-vous que cela répercuterait la propriété min-largeur dans la requête médiatique? Réglage de la taille de la police pour HTML doit également filtrer sur le corps, non?
"16px, la taille de police par défaut de mon navigateur" Il est probablement défini sur le corps dans le chrome CSS (remplacement efficacement HTML Taille de police)
Impossible d'utiliser 31.5em à l'intérieur de la requête médiatique. Pas idéal, mais toujours mieux que d'utiliser des pixels.