流式布局（百分比布局）
流式布局，就是百分比布局，也稱為非固定像素布局
通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。
流式布局方式是移動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%; }