流式布局（百分比布局）
流式布局，就是百分比布局，也称为非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式
max-width 最大宽度(max-height最大高度)
min-width最小宽度（min-height最小高度）
技术选型
方案：我们采取单独制作移动页面方案
技术：布局采取流式布局
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maxmium-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/index.css"> <title>Document</title> </head> <body> <!-- 顶部 --> <header class="app"> <ul> <li> <img src="./img/close.png" alt=""> </li> <li> <img src="./img/logo.png" alt=""> </li> <li>打开京东App,购物更轻松</li> <li>立即打开</li> </ul> </header> <!-- 搜索 --> <div class="search-wrap"> <div class="search-btn"></div> <div class="search"> <div class="magnifier"></div> </div> <div class="search-login">登录</div> </div> <!-- 主题内容部分 --> <div class="main-content"> <!-- 滑动图 --> <div class="slide"> <img src="./upload/q70.jpg" alt=""> </div> <!-- 品牌 --> <div class="brand"> <div> <a href="#"><img src="./upload/1.jpg" alt=""></a> </div> <div> <a href="#"><img src="./upload/2.jpg" alt=""></a> </div> <div> <a href="#"><img src="./upload/3.jpg" alt=""></a> </div> </div> <!-- 导航 --> <nav class="nav"> <a href="#"> <img src="./img/cs.png" alt=""> <p>京东超市</p> </a> <a href="#"> <img src="./img/dq.png" alt=""> <p>京东电器</p> </a> <a href="#"> <img src="./img/fs.png" alt=""> <p>京东服饰</p> </a> <a href="#"> <img src="./img/sx.png" alt=""> <p>京东生鲜</p> </a> <a href="#"> <img src="./img/dj.png" alt=""> <p>京东到家</p> </a> <a href="#"> <img src="./img/jf.png" alt=""> <p>充值缴费</p> </a> <a href="#"> <img src="./img/p.png" alt=""> <p>9.9元拼</p> </a> <a href="#"> <img src="./img/lq.png" alt=""> <p>领券</p> </a> <a href="#"> <img src="./img/zq.png" alt=""> <p>赚钱</p> </a> <a href="#"> <img src="./img/hy.png" alt=""> <p>PLUS会员</p> </a> </nav> <!-- 新闻模块 --> <div class="news"> <a href="#"><img src="./upload/1.jpg.dpg" alt=""></a> <a href="#"><img src="./upload/2.jpg.dpg" alt=""></a> <a href="#"><img src="./upload/3.jpg.dpg" alt=""></a> </div> </div> </body> </html>
css
body{ min-width: 360px; max-width: 640px; width: 100%; margin: 0 auto; font-size: 14px; font-family: -apple-system, 'Helvetica Neue', sans-serif; line-height: 1.5; color: #666; box-sizing: border-box; } *{ /* 点击高亮我们需要清除 设置为透明 */ -webkit-tap-highlight-color:transparent; } input{ /* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */ -webkit-appearance: none; } /* 禁用长按页面时的弹出菜单 */ img,a{ -webkit-touch-callout: none; } ul{ margin: 0; padding: 0; list-style: none; } img{ vertical-align: top; } a{ text-decoration: none; } p{ margin: 0; } /* 最顶部app */ .app{ height: 45px; background: #333; } .app ul li{ height: 45px; float: left; text-align: center; line-height: 45px; color: #fff; } .app ul li:nth-child(1){ width: 8%; } .app ul li:nth-child(1) img{ width: 16px; vertical-align: middle; } .app ul li:nth-child(2){ width: 10%; } .app ul li:nth-child(2) img{ width: 30px; vertical-align: middle; } .app ul li:nth-child(3){ width: 57%; } .app ul li:nth-child(4){ width: 25%; background: #CD2525; } /* 搜索 */ .search-wrap{ height: 44px; position: fixed; overflow: hidden; min-width: 320px; max-width: 640px; width: 100%; background: #E43130; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); } .search-btn{ position: absolute; top: 0; left: 0; width: 40px; height: 44px; } .search-btn::before{ content: ""; display: block; width: 20px; height: 18px; background: url("../img/gn.png") no-repeat; background-size: 20px 18px; margin: 14px 0 0 15px; } .search-login{ position: absolute; top: 0; right: 0; width: 40px; height: 44px; color: #fff; line-height: 44px; text-align: center; } .search{ position: relative; height: 30px; margin: 0 50px; background: #fff; border-radius: 15px; margin-top: 7px; } .search::before{ content: ""; height: 15px; width: 20px; position: absolute; top: 8px; left: 13px; background: url("../img/jd.png") no-repeat; background-size: 20px 15px; border-right: 1px solid #111; padding-right: 10px; } .magnifier{ position: absolute; height: 18px; width: 15px; background: url("../img/jd-sprites.png") no-repeat; background-position: -83px 0; background-size: 200px ; left: 50px; top: 8px; } /* 滑动图 */ .slide img{ width: 100%; } /* 品牌 */ .brand{ overflow: hidden; border-radius: 10px 10px 0 0; } .brand div{ width: 33.33%; float: left; cursor: pointer; } .brand div img{ width: 100%; } /* 导航 */ .nav{ overflow: hidden; } .nav a{ display: block; height: 74px; width: 20%; float: left; text-align: center; } .nav a img{ width: 40px; margin: 10px 0 0; } .nav a p{ height: 18px; margin: 6px 0 0; } /* 新闻模块 */ .news{ margin-top: 20px; } .news a{ display: block; width: 33.33%; float: left; } .news a:nth-child(n+2){ box-sizing: border-box; border-left: 1px solid #ccc; } .news a img{ width: 100%; }