实现如下图页面重构，使得屏幕放大缩小都不影响页面的架构：
实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>汽车广场手机端网页</title> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1330548_7ec2ezi34ao.css"> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } html,body,.box{ height: 100%; max-width: 750px; margin: 0 auto; } .box{ display: flex; flex-direction: column; } /** 顶部 **/ .top{ height: 50px; line-height: 50px; background: pink; border-bottom: 1px solid #ccc; } .top ul >li >span{ float: left; margin-left: 2%; } .top ul >li >h3{ text-align: center; margin-right: 10%; } /** 主体内容 **/ .center{ flex: 1; overflow: auto; } /** 头部 **/ .header{ height: 270px; margin-top: 30px; background: #eee; } .header .searth ul{ width: 100%; height: 50px; padding-top: 20px; background: #ddd; } .header .searth>ul li{ width: 90%; height: 30px; line-height: 30px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid #ccc; } .searth >ul >li >input{ width: 80%; height: 26px; border: none; } .img img{ height: 100%; width: 100%; } /** 导航 **/ .nav{ height: 100px; margin-top: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 1em 0; background-color: #ffffff; } .nav ul{ display: flex; } .nav>ul>li{ flex: 1; height: 70px; text-align: center; border-right: 1px solid #ccc; } .nav > ul > li:last-child { border-right: 0; } /** 内容 **/ .content .one{ margin-top: 20px; } .content .four{ border-top: 1px solid #ccc; padding: .5em 0; } .content div >ul{ display: flex; } .content .one >ul >li:first-child{ flex: 1; height: 50px; } .content .one >ul >li:last-child{ flex: 9; height: 50px; } .content .two{ display: flex; } .content .two>p{ flex: 1; } .content .three{ display: flex; } .content .three>img{ flex: 1; width: 33%; } .content .four >ul >li{ flex: 1; height: 15px; text-align: center; border-right: 1px solid #ccc; } .content .four> ul > li:last-child { border-right: 0; } /** 底部 **/ .footer{ height: 50px; background: pink; } .footer ul{ display: flex; } .footer >ul >li{ flex: 1; text-align: center; } </style> </head> <body> <div class="box"> <!-- 顶部 --> <div class="top"> <ul> <li><span class="iconfont icon-fanhui1">返回</span></li> <li><h3>汽车广场</h3></li> </ul> </div> <div class="center"> <!-- 头部（搜索+图片）--> <div class="header"> <div class="searth"> <ul> <li> <i class="iconfont icon-sousuo4"></i> <input type="text" placeholder="搜索你感兴趣的汽车"> </li> </ul> </div> <div class="img"> <img src="./img/car.jpg"> </div> </div> <!-- 导航 --> <div class="nav"> <ul> <li> <div><img src="./img/c_1.jpg"></div> <div>大V榜</div> </li> <li> <div><img src="./img/c_2.jpg"></div> <div>购车指南</div> </li> <li> <div><img src="./img/c_3.jpg"></div> <div>热议车榜</div> </li> <li> <div><img src="./img/c_4.jpg"></div> <div>询底价</div> </li> <li> <div><img src="./img/c_5.jpg"></div> <div>拍照识车</div> </li> </ul> </div> <!-- 主体内容 --> <div class="content"> <div class="one"> <ul> <li> <img src="./img/c_1.jpg"> </li> <li> <p>苯苯瓜<i class="iconfont icon-huangguan"></i></p> <p style="font-size: 10px">3小时前 来自iphone X</p> </li> </ul> </div> <div class="two"> <p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。 <a href="#">@苯苯瓜的微博投票</a></p> </div> <div class="three"> <img src="./img/2_2.jpg"> <img src="./img/2_3.jpg"> <img src="./img/2_4.jpg"> </div> <div class="four"> <ul> <li><i class="iconfont icon-fenxiang"></i>4</li> <li><i class="iconfont icon-pinglun1"></i>26</li> <li><i class="iconfont icon-zan"></i>2434</li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <ul> <li> <div><i class="iconfont icon-home-selected"></i></div> <div>首页</div> </li> <li> <div><i class="iconfont icon-shipin"></i></div> <div>视频</div> </li> <li> <div><i class="iconfont icon-bianji2"></i></div> <div>发布</div> </li> <li> <div><i class="iconfont icon-zhaoche"></i></div> <div>找车</div> </li> <li> <div><i class="iconfont icon-huati"></i></div> <div>话题</div> </li> </ul> </div> </div> </body> </html>