采用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;
}
