html5编写一个手机app的首页

心已赠人 2021-09-15 13:30 405阅读 0赞

![70][]

![70 1][]

为了适配各种手机用一段简单的js代码解决

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>

![20201202133616605.png][]

**整理了一些书籍分享给大家，可关注公众号菜单栏点击推荐书籍获取链接**

**JavaScript高级程序设计(红宝书)     你不知道的JavaScript（上卷）  你不知道的JavaScript（中卷）  你不知道的JavaScript（下卷）.pdf**

**js权威指南.pdf    深入理解ES6.pdf    es6标准入门(第三版).pdf    HTML与CSS入门经典   Javascript高级程序设计**

**JavaScript设计模式    性能网站建设进阶指南   精通正则表达式   HTML5程序设计  CSS权威指南  JavaScript权威指南**

**JavaScript面向对象编程指南   HTTP权威指南.pdf   计算的本质：深入剖析程序和计算机.pdf**

[70]: /images/20210813/a9d9c1827a2842fb84ad8d3e5e2c0801.png
[70 1]: /images/20210813/a9139059ff704a8197a965e7739f0cbb.png
[20201202133616605.png]: /images/20210813/4e420cd41a304ee19cc31b746946508a.png