为了适配各种手机用一段简单的js代码解决
<script>
autoSize();
window.onresize = function(){
autoSize();
}
function autoSize(){
// 获取当前浏览器的视窗宽度，放在w中
var w = document.documentElement.clientWidth;
// 计算实际html font-size大小
var size = w * 100 / 375 ;
// 获取当前页面中的html标签
var html = document.querySelector('html');
// 设置字体大小样式
html.style.fontSize = size + 'px';
}
</script>
头部和底部固定不动，用fixed固定定位
中间用overflow:scroll;
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="./css/font-awesome.css"> <title>Document</title> <style type="text/css"> html{ font-size: 100px; } div{ box-sizing: border-box; } body,input,i,a{ padding:0; margin:0; text-decoration: none; outline: none; font-size: 0.12rem; } body{ background: rgb(240,240,240); } .header>.top{ position: fixed; left:0; top:0; z-index: 10; height: 0.44rem; background: #26A69A; font-size: 0.14rem; color:white; width: 100%; text-align: center; padding-left: 0.17rem; padding-right: 0.17rem; line-height: 0.44rem; } .header:after{ content: ""; display: block; clear: both; } .top>.address{ float: left; } .top input{ width: 2.54rem; height: 0.28rem; } .search>i{ position: absolute; left:0.83rem; top:0.17rem; z-index: 10; color: gray; } .top>.xx{ position: absolute; left:3.1rem; top:0.08rem; z-index: 5; color: gray; font-size: 0.14rem; } .top>.sm{ position: absolute; left:3.35rem; top:0rem; z-index:5; color: white; font-size: 0.28rem; margin-left: 0.1rem; } .header>.banner{ margin-top:0.44rem; } .banner>.img{ position: relative; width: 100%; height: 1.64rem; } .banner>.img>img{ width: 100%; height:1.64rem; object-fit: cover; } .banner .cut1,.banner .cut2{ font-size: 0.4rem; color:white; font-weight: lighter; } .banner .cut1{ position:absolute; left:0.1rem; top:0.55rem; z-index: 5; } .banner .cut2{ position: absolute; right: 0.1rem; top:0.55rem; z-index: 5; } .nav{ height: 1.08rem; width: 100%; background: white; display: flex; flex-flow: row ; justify-content: space-around; padding-top: 0.16rem; text-align: center; color: #666666; } .nav>.first>.top,.nav>.sec>.top,.nav>.third>.top,.nav>.four>.top{ width: 0.6rem; height: 0.6rem; margin-bottom: 0.08rem; } .nav>.first>.top{ background: #48BDB2; } .nav>.sec>.top{ background: #FF5353 ; } .nav>.third>.top{ background: #5B96F7 ; } .nav>.four>.top{ background: #F38A42 ; } .top>i{ font-size: 0.35rem; color: white; margin-top:0.1rem; } .intro{ width: 100%; height: 0.36rem; background: rgb(234,246,245); display: flex; flex-flow: row; justify-content: flex-start; font-size: 0.09rem; color: #333333; border: 1px solid #26A69A; } .intro>img{ width: 0.43rem; height: 0.342rem; margin-right: 0.09rem; } .intro span{ color: red; } .show{ height: 1rem; } .content>.first{ height: 1.85rem; background: white; padding-left: 0.12rem; padding-top: 0.13rem; padding-right: 0.17rem; } .content{ overflow: scroll; } .content>.first>.title{ color: #666666; } .first>.title>span{ color: green; font-weight: bold; font-size: 0.12rem; margin-left: 0.08rem; } .first>.title>a{ float: right; color: #666666; } .first>.left{ width: 2.16rem; height: 1.36rem; background: red; } .first>.left>img{ width: 2.16rem; object-fit: cover; } .content>.first>.firstImg{ display: flex; flex-flow: row wrap; justify-content: space-between; } .first .right>.top{ margin-top: 0.12rem; margin-bottom: 0.1rem; } .first .left{ margin-top: 0.12rem; } .cell{ padding-left: 0.12rem; padding-right: 0.17rem; margin-top:0.13rem; background: white; padding-top: 0.17rem; } .cell>.title{ height: 0.2rem; } .cell>.title>span{ color: green; font-weight: bold; font-size: 0.12rem; margin-left: 0.08rem; margin-top: 0.12rem; } .content>.cell>.title{ color: #666666; } .cell>.title>a{ float: right; color: #666666; } .cell .cell1{ width: 47%; height: 1.85rem; } .cell1>.left{ width: 100%; height: 1.85rem; } .cell1 img{ width: 100%; object-fit: cover; display: block; } .cell1 .name{ color: green; } .cell1>.left>.view{ font-size: 0.09rem; color: gray; border-bottom:1px dashed gray; margin-bottom: 0.08rem; padding-bottom: 0.03rem; } .cell1>.left>.shop{ float: right; background: #26A69A; border-radius: 4px; padding: 0.03rem 0.05rem; font-size: 0.12rem; color: white; margin-right: 0.03rem; } .cell1>.left>span{ color: green; font-size: 0.13rem; } .cell>.bottom{ display: flex; flex-flow: row wrap; justify-content: space-between; } .cell .cell1{ margin-bottom: 0.15rem; } .footer{ position: fixed; width: 100%; left:0; bottom: 0; z-index: 5; height: 0.48rem; background: #26A69A ; display: flex; flex-flow: row; justify-content: space-around; line-height: 0.24rem; } .footer>.option{ width: 25%; text-align: center; } .content{ margin-bottom: 0.5rem; } .footer{ color: white; } .footer i{ font-size: 0.15rem; } .footer .list{ font-size: 0.08rem; } .footer>.option:hover{ background: white; color: #26A69A; } </style> </head> <body> <div class="header"> <div class="top"> <div class="address">北京</div> <div class="search"> <i class="fa fa-search"> Sketch</i> <input type="text" > </div> <i class="fa fa-times-circle-o xx"></i> <i class="fa fa-minus-square-o sm"></i> </div> <div class="banner"> <div class="img"> <img src="./content4.png" alt=""> <div class="cut1"> < </div> <div class="cut2"> > </div> </div> </div> <div class="nav"> <div class="first"> <div class="top"><i class="fa fa-gift"></i></div> <div class="bottom">优惠活动</div> </div> <div class="sec"> <div class="top"><i class="fa fa-handshake-o"></i></div> <div class="bottom">商家联盟</div> </div> <div class="third"> <div class="top"><i class="fa fa-th-large"></i></div> <div class="bottom">汽车资讯</div> </div> <div class="four"> <div class="top"><i class="fa fa-headphones"></i></div> <div class="bottom">售后服务</div> </div> </div> <div class="intro"> <img src="./lv.jpg" alt=""> <div class="right"> <div class="top"> 目前<span>10000人</span>为绿化做出贡献 </div> <div class="bottom"> 您可以成为<span>第100002名</span>为绿化做贡献者 </div> </div> </div> <div class="show"> <img src="./content1.png" alt=""> </div> </div> <div class="content"> <div class="first"> <div class="title"> <span>|</span> TOP排行 <a href="">更多 > </a> </div> <div class="firstImg"> <div class="left"> <img src="./content2.png" alt=""> </div> <div class="right"> <div class="top"> <img src="./content3.png" alt=""> </div> <div class="bottom"> <img src="./content3.png" alt=""> </div> </div> </div> </div> <div class="cell"> <div class="title"> <span>|</span> 新能源品牌热卖 <a href="">更多 ></a> </div> <div class="bottom"> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> </div> </div> <div class="cell"> <div class="title"> <span>|</span> 新能源品牌热卖 <a href="">更多 ></a> </div> <div class="bottom"> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> <div class="cell1"> <div class="left"> <div class="img"> <img src="./title.jpg" alt=""> </div> <div class="name"> 特斯拉 </div> <div class="view"> 特斯拉特斯拉特斯拉特斯拉 </div> <span>￥34.223.00</span> <span class="shop">加入购物车</span> </div> </div> </div> </div> </div> <div class="footer"> <div class="option shouye"> <i class="fa fa-home"></i> <div class="list">首页</div> </div> <div class="option"> <i class="fa fa-th-large"></i> <div class="list">分类</div> </div> <div class="option"> <i class="fa fa-list-ul"></i> <div class="list">定位</div> </div> <div class="option"> <i class="fa fa-user-o"></i> <div class="list">我</div> </div> </div> <script> autoSize(); window.onresize = function(){ autoSize(); } function autoSize(){ // 获取当前浏览器的视窗宽度，放在w中 var w = document.documentElement.clientWidth; // 计算实际html font-size大小 var size = w * 100 / 375 ; // 获取当前页面中的html标签 var html = document.querySelector('html'); // 设置字体大小样式 html.style.fontSize = size + 'px'; } </script> </body> </html>整理了一些书籍分享给大家，可关注公众号菜单栏点击推荐书籍获取链接
JavaScript高级程序设计(红宝书) 你不知道的JavaScript（上卷） 你不知道的JavaScript（中卷） 你不知道的JavaScript（下卷）.pdf
js权威指南.pdf 深入理解ES6.pdf es6标准入门(第三版).pdf HTML与CSS入门经典 Javascript高级程序设计
JavaScript设计模式 性能网站建设进阶指南 精通正则表达式 HTML5程序设计 CSS权威指南 JavaScript权威指南
JavaScript面向对象编程指南 HTTP权威指南.pdf 计算的本质：深入剖析程序和计算机.pdf
