The simple and practical percentage layout is still very suitable for mobile WAP page layout: min-width:320px; max-width:420px; width:100%; overflow-x: hidden; margin: 0 auto; The minimum width is 320px, the maximum width is 420px, and the width automatically adapts between 320px and 420px, which looks okay. Only set the width in the <img> tag Attribute percentage values, such as width="40%", do not need to set the height attribute, so that the image can be scaled according to the original proportion. The blocks in the container can also be laid out using percentages, such as 60% on the left and 40% on the right .
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use box-sizing: border-box
and padding
and then set the width to 33.33%
This is the simplest method
Each picture block floats left, width 30%, left margin 2.5%:
100%=(2.5%+30%)+(2.5%+ 30%)+(2.5%+30%)+2.5%
The simple and practical percentage layout is still very suitable for mobile WAP page layout:
min-width:320px;
max-width:420px;
width:100%;
overflow-x: hidden;
margin: 0 auto;
The minimum width is 320px, the maximum width is 420px, and the width automatically adapts between 320px and 420px, which looks okay.
Only set the width in the <img> tag Attribute percentage values, such as width="40%", do not need to set the height attribute, so that the image can be scaled according to the original proportion.
The blocks in the container can also be laid out using percentages, such as 60% on the left and 40% on the right .