web-dev-qa-db-fra.com

Est-il possible d'obtenir la largeur de la fenêtre en unités em en utilisant javascript?

Je cherche un moyen fiable d'obtenir la largeur de la fenêtre dans les unités em en utilisant javascript. J'ai été surpris de voir que jQuery ne renverra qu'un résultat en pixels. Toute aide est appréciée.

javascriptjquerymedia-queriesem
34
hammerbrostime

Cela semble fonctionner:

$(window).width() / parseFloat($("body").css("font-size"));
49
hammerbrostime

Voici une solution qui ne nécessite pas jQuery ni une déclaration de taille de police explicite.

window.innerWidth /
  parseFloat(getComputedStyle(document.querySelector('body'))['font-size'])
18
Brad

Pour ceux qui ont besoin de tout mettre ensemble, ce code fonctionne pour moi: 

<p>Window size: <span id="width_px"></span> pixels or <span id="width_ems"></span> ems</p>
<script>
  window.onresize = function() {
    document.getElementById("width_px").innerHTML = window.innerWidth;
    document.getElementById("width_ems").innerHTML = window.innerWidth / parseFloat($("body").css("font-size"));
  };
</script>

Pour l'assembler, utilisez la réponse ci-dessus ajoutée au code de test window-width trouvé dans le tutoriel lié. 

1
bofa

Il est possible de le calculer, mais em n'est pas une "simple" unité comme px car elle dépend d'une sélection de police (c'est-à-dire une combinaison de famille de police, de style (gras, italique, etc.) et de taille de police). Bien sûr, la taille de la police elle-même peut être relative (par exemple, si vous attribuez à une police une taille em, ex ou un pourcentage, la hauteur px calculée pour cette police est déduite de la taille de l'élément parent).

Pour obtenir la largeur em d'une page, vous pouvez effectuer la conversion comme ceci (avertissement: psuedocode):

// For this to work reliably, size should be in px, pt, or mm.
function getWindowWidthInEm(fontFamily, style, size) {
    var box = document.createElement("span");
    box.innerText = "M";
    box.style.fontFamily = fontFamily;
    box.style.fontSize   = size;
    box.style.fontWeight = style is bold;
    box.style.fontStyle  = style is italic;

    var body = document.getElementsByTagName("body")[0];
    body.appendChild( box );

    var emInPx = box.getComputedStyle().width;

    body.removeChild( box );

    var windowPx = window.width;
    return windowx / emInPx;
}
0
Dai