携程移动端案例

Myth丶恋晨 2021-07-24 11:57 458阅读 0赞

采用rem适配各种移动端,只需要计算rem,通用(375/750)\*100=50px;即将下列  
的px数值变成,数值/50rem;即可

html文件:

<html>
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title></title>
    	<script src='js/underscore.js'></script>
    	<link rel="stylesheet" href="css/less.css">
    	<link rel="stylesheet" href="css/reset.css">
    </head>
    <body>
    
    	<div class='header'>
    	
    		<div class='hd-cont'>
    			
    			<span>搜索:目的地/酒店/景点/航班号</span>
    		</div>
    		
    		<a class='login'>我 的</a>
    	</div>
    
    	<div class='menu'>
    		<div class='hotel'>
    			<span>酒店</span>
    			<span>海外酒店</span>
    			<span>团购酒店</span>
    			<span>特价酒店</span>
    			<span>民宿.酒店</span>
    		</div>
    		<div class="flight">
    			<span>机票</span>
    			<span>火车票</span>
    			<span>汽车票.船票</span>
    			<span>特价机票</span>
    			<span>专车.租车</span>
    		</div>
    		<div class="travel">
    			<span>旅游</span>
    			<span>门票</span>
    			<span>邮轮旅游</span>
    			<span>目的地攻略</span>
    			<span>定制旅行</span>
    		</div>
    	</div>
    
    
    	<script>
    		window.onload=function()
    		{ 
    			document.documentElement.style.fontSize=(document.documentElement/750)*100+'px';
    		}
    		window.onresize=function()
    		{ 
    			document.documentElement.style.fontSize=(document.documentElement/750)*100+'px';
    		}
    	</script>
    	
    </body>
    
    </html>

less文件:

.header{ 
    	width:100%;
    	height:44px;
    	background-color:#f6f6f6;
    	border-top:solid 1px #ccc;
    	border-bottom:solid 1px #ccc;
    	padding:7px 50px 7px 8px;
    	box-sizing:border-box;
    	position:fixed;
    	top:0px;
    
    }
    .header .hd-cont{ 
    	width:100%;
    	height:44-7-7-2px;
    	border:solid 1px #999;
    	border-radius:5px;
    	line-height:44-7-7-2px;
    	color:#666;
    	font-size:12px;
    	background-color:white;
    	padding:0px 5px;
    }
    .header span{ 
    	padding-left:20px;
    	position:relative;
    }
    .header span::after{ 
    	content:'';
    	position:absolute;
    	background-image:url('../img/ico_home.png');
    	top:-2px;
    	left:2px;
    	width:15px;
    	height:18px;
    	overflow:hidden;
    	background-position:-59px -274px;
    	background-size:104px 326px;
    }
    .header .login{ 
    	width:44px;
    	height:44px;
    	position:absolute;
    	top:0;
    	right:4px;
    	line-height:72px;
    	text-align:center;
    	color:#099fde;
    }
    .header .login::before{ 
    	content:'';
    	position:absolute;
    	top:4px;
    	left:50%;
    	margin-left:-10px;
    	width:24px;
    	height:26px;
    	background-image:url('../img/ico_home.png');
    	background-position:-59px -193px;
    	background-size:104px 326px;
    }
    .menu{ 
    	padding-top:56px;
    
    }
    .menu .hotel{ 
    	width:97%;
    	height:90px;
    	background-color:#fa6c54;
    	box-sizing:border-box;
    	margin:0px 5px;
    	border-radius:5px 5px 0px 0px;
    	margin-bottom:5px;
    
    }
    .menu .hotel span{ 
    	float:left;
    	width:33.33%;
    	height:45px;
    	color:white;
    	text-align:center;
    	border-right:solid 1px white;
    }
    .menu .hotel span:nth-child(1)
    { 
    	height:90px;
    	border-bottom:solid 1px white;
    	background-image:url('../img/hotel.png');
    	background-size:100%;
    	background-repeat:no-repeat;
    	background-position:0px bottom;
    }
    .menu .hotel span:nth-child(2)
    { 
    	border-bottom:solid 1px white;
    }
    .menu .hotel span:nth-child(3)
    { 
    	border-right:none;
    	border-bottom:solid 1px white;
    }
    .menu .hotel span:nth-child(4)
    { 
    	
    }
    .menu .hotel span:nth-child(5)
    { 
    	border-right:none;
    }
    
    
    
    .menu .flight{ 
    	width:97%;
    	height:90px;
    	background-color:rgb(72,153,243);
    	box-sizing:border-box;
    	margin:0px 5px;
    	margin-bottom:5px;
    
    }
    .menu .flight span{ 
    	float:left;
    	width:33.33%;
    	height:45px;
    	color:white;
    	text-align:center;
    	border-right:solid 1px white;
    }
    .menu .flight span:nth-child(1)
    { 
    	height:90px;
    	border-bottom:solid 1px white;
    	background-image:url('../img/hotel.png');
    	background-size:100%;
    	background-repeat:no-repeat;
    	background-position:0px bottom;
    }
    .menu .flight span:nth-child(2)
    { 
    	border-bottom:solid 1px white;
    }
    .menu .flight span:nth-child(3)
    { 
    	border-right:none;
    	border-bottom:solid 1px white;
    }
    .menu .flight span:nth-child(4)
    { 
    	
    }
    .menu .flight span:nth-child(5)
    { 
    	border-right:none;
    }
    
    
    
    .menu .travel{ 
    	width:97%;
    	height:90px;
    	background-color:rgb(57,183,147);
    	box-sizing:border-box;
    	margin:0px 5px;
    	border-radius:0px 0px 5px 5px;
    	margin-bottom:5px;
    
    }
    .menu .travel span{ 
    	float:left;
    	width:33.33%;
    	height:45px;
    	color:white;
    	text-align:center;
    	border-right:solid 1px white;
    }
    .menu .travel span:nth-child(1)
    { 
    	height:90px;
    	border-bottom:solid 1px white;
    	background-image:url('../img/hotel.png');
    	background-size:100%;
    	background-repeat:no-repeat;
    	background-position:0px bottom;
    }
    .menu .travel span:nth-child(2)
    { 
    	border-bottom:solid 1px white;
    }
    .menu .travel span:nth-child(3)
    { 
    	border-right:none;
    	border-bottom:solid 1px white;
    }
    .menu .travel span:nth-child(4)
    { 
    	
    }
    .menu .travel span:nth-child(5)
    { 
    	border-right:none;
    }