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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 % ?