html5 - Comment est calculée la hauteur rem des images adaptatives des téléphones portables?

Question

La mise en page de la page Web mobile est composée de deux lignes et d'une ligne occupant toute la largeur

li {
    width: 7.375rem;
    height: 4.5rem;
    float: left;
    margin-left: .4rem;
    position: relative;
}
li img{ width: 100%; height: 4.5rem; display: block; border-radius: .3rem; overflow: hidden; background-color: #fff;}

rem est automatiquement modifié en fonction de la taille de la police HTML.
Comment calculer la valeur initiale de largeur et de hauteur de ce li ?

Answer 1

Comment calcule-t-on le rem ?
Dites-moi ma méthode de calcul ! La façon dont je le calcule est la suivante : (largeur de l'écran/largeur de l'image d'effet)*100+'px' ;
Par exemple, l'image d'effet est de 750 et l'écran est de 375, 1rem=(375/750)*100+'px' , soit 1rem=50px
Si une image mesure 100px de large et 50px de haut dans le rendu ; le paramètre de style est img{height:.5rem;width:1rem;}

Mais ce que je ne comprends pas, c'est que si deux li occupent une ligne, ne suffirait-il pas de définir la largeur du li à 50 % ?