Convertir pixels en rem

Bonjour,
Je convertissais un petit script que j'avais avec jquery pour afficher la largeur du viewport en pixels et rem.

<div class="width-viewport">
    <span> Largeur de la fenêtre :</span>
    <span id="largeur_page_px">0</span><span>px</span>
    <span id="largeur_page_rem">0</span><span>rem</span>
</div>

let widthOutputPx = document.querySelector("#largeur_page_px");
let widthOutputRem = document.querySelector("#largeur_page_rem");
function updateSize() {
  widthOutputPx.textContent = window.innerWidth;
  widthOutputRem.textContent = window.innerWidth;
}
updateSize();
window.addEventListener("resize", updateSize);

Là où je bloque c'est pour convertir en rem.
Avant avec jquery j'avais:

window.addEventListener('load',function(){
    var elLargeurPage = document.getElementById('largeur_page_rem');
    elLargeurPage.innerHTML = Math.round((document.body.clientWidth/16)*1)/1;
    this.addEventListener('resize',function(){
        elLargeurPage.innerHTML = Math.round((document.body.clientWidth/16)*1)/1;
    });
});

Bonjour,

Il n'y a pas de jquery dans l'ancien code que tu nous montres. De plus, dans cet ancien code, il y a une division par 16 du nombre de px pour espérer obtenir une valeur en rem. Or rien ne garantie que 1rem fasse 16px car cela dépend de la manière dont l'utilisateur configure son navigateur. Enfin les multiplication et division par 1 de ce code ne servent à rien. Une erreur de copier-coller ?

Amicalement,

Oui pour la division par 16, mais comme c'était uniquement pour moi pour le développement donc je reste toujours sur 1rem = 16px.
Les opérations par 1 c'était par rapport aux arrondis, au cas où je voulais une décimale. Mais il est vrai que je ne me souviens plus.
Dans nouveau code, comment je dois introduire cette fonction Math.round
Erci

Bonsoir,

est ce que :

console.log(Math.round(parseFloat(getComputedStyle(document.body).fontSize))) 

te donnerait la valeur que tu recherches ?

edit: exemple fonctionnel : https://codepen.io/gc-nomade/pen/PoLVNME?editors=0111
Modifié par gcyrillus (16 Feb 2024 - 00:58)

Bonjour,

cpalo a écrit :
Oui pour la division par 16, mais comme c'était uniquement pour moi pour le développement donc je reste toujours sur 1rem = 16px.
Les opérations par 1 c'était par rapport aux arrondis, au cas où je voulais une décimale. Mais il est vrai que je ne me souviens plus.
Dans nouveau code, comment je dois introduire cette fonction Math.round
Erci

Ton ancien code marche toujours même sans jquery.

L'exemple codepen de gcyrillus améliore la solution et devrait suffire largement dans ton cas. La partie de code à récupérer est :

Math.round(document.body.clientWidth / parseFloat(getComputedStyle(document.body).fontSize))

Note : pour ceux qui voudraient calculer la valeur du rem en px en toute circonstance, on notera que font-size ne donne pas toujours la valeur du rem même si l'élément sur lequel on calcule ce font-size a bien un font-size de 1rem, car cela dépend de la valeur de la taille minimum de la police configurée dans le navigateur. Si par exemple, cette taille minimum a été mis à 20px, tout en laissant la taille de la police à 16px, le code proposé par gcyrillus donnera 1rem = 20px alors que 1rem vaut pourtant 16px dans ce cas. Il vaut donc mieux par exemple donner une hauteur de 1rem à un élément et calculer sa hauteur plutôt que de se fier à la valeur de son font-size.

Le code utilisable directement pour répondre à la question initiale pourrait alors être quelque chose du genre :

window.addEventListener('load', function(){
    let elLargeurPage = document.getElementById('largeur_page_rem'),oneRem;
    function getOneRem(){
    	elLargeurPage.style.height="1rem";
    	oneRem=parseFloat(getComputedStyle(elLargeurPage).height);
    	elLargeurPage.style.height="";
    	return oneRem;
    }
    function computeRems(){return Math.round(document.body.clientWidth/getOneRem());}
    elLargeurPage.innerHTML = computeRems()+"rem (avec 1rem = "+oneRem+"px)";
    this.addEventListener('resize', function(){
        elLargeurPage.innerHTML = computeRems()+"rem (avec 1rem = "+oneRem+"px)";
    });
});

EDIT: ceci étant, on a pas mal complexifié la solution pour pas grand chose. À voir si c'est vraiment nécessaire selon les circonstances.

Amicalement,
Modifié par parsimonhi (16 Feb 2024 - 06:40)

Bonjour,
Par rapport au fait que mon ancien code ne fonctionnait pas sans jquery, en fait c'était une erreur de lien vers le script !! grr...
Petite verification, les dimensions affichées ne tiennent pas compte de la scrollbar?
Je vous livre le code final, car en plus ces dimensions apparaissent dans un bloc qui change de couleur suivant les breakpoints.

<div class="topbar display-breakpoints">		
    <div class="block-breakpoints">			
        <div class="width-viewport">
            <span> Largeur de la fenêtre :</span>
            <span id="largeur_page_px">0</span><span>px</span>
            <span id="largeur_page_rem">0</span><span>rem</span>
        </div>
    </div>
</div><!-- #topbar -->

let widthOutputPx = document.querySelector("#largeur_page_px");
let widthOutputRem = document.querySelector("#largeur_page_rem");
function updateSize() {
  widthOutputPx.textContent = window.innerWidth;
  widthOutputRem.textContent = Math.round(document.body.clientWidth / parseFloat(getComputedStyle(document.body).fontSize));
}
updateSize();
window.addEventListener("resize", updateSize);

.display-breakpoints {
    position: sticky;
    top: 0px;	
}
    .block-breakpoints { 
        display: grid;
        grid-auto-flow: column;
        justify-content: center;		
        padding-block: 12px;		
        background-color: hsla(60, 60%, 40%, 0.4); 
    }
	
@media only screen and (min-width: 576px) {		
    .block-breakpoints {
        background-color: hsla(120, 60%, 40%, 0.4); 
    }
}

Encore Merci
Amicalement
Modifié par cpalo (16 Feb 2024 - 12:27)