The mobile webpage layout is two li and one line occupying the full width
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 is automatically changed according to the font-size of html.
How to calculate the initial width and height value of this li?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
How do you calculate rem?
Tell me my calculation method! The way I calculate it is: (screen width/effect picture width)*100+'px';
For example, the effect picture is 750 and the screen is 375, 1rem=(375/750)*100+'px', which is 1rem=50px
If a picture is 100px wide and 50px high in the rendering; the style setting is img{height:.5rem;width:1rem;}
But what I don’t understand is that if two li’s occupy one line, wouldn’t it be enough to set the li width to 50%?