实现如下图页面重构，使得屏幕放大缩小都不影响页面的架构：
实现代码如下：
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 Xp>
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>4li>
<li><i class="iconfont icon-pinglun1">i>26li>
<li><i class="iconfont icon-zan">i>2434li>
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>