对于流式布局，就是百分比布局，宽度适用百分比，高度自适应就可以了。这个是一种比较古老的布局显示，需要稍作了解。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { list-style: none; } div { position: fixed; width: 100%; bottom: 0px; left: 0px; height: 50px; background-color: palegoldenrod; } ul li a img { height: 100%; } ul li { float: left; height: 50px; width: 20%; } </style> </head> <body> <div> <ul> <li><a href="#"><img src="./images/index.png" alt=""></a></li> <li><a href="#"><img src="./images/classify.png" alt=""></a></li> <li><a href="#"><img src="./images/jd.png" alt=""></a></li> <li><a href="#"><img src="./images/car.png" alt=""></a></li> <li><a href="#"><img src="./images/login.png" alt=""></a></li> </ul> </div> </body> </html>
补充：
使用二倍图片的时候，设计时给出的是750px的大小设计图，我们需要将图片拖到软件中，切换到开发模式，将倍数修改成2倍就可以了，结果就是宽度变成了350px。
