移动端案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<title></title>
		<script>
			(function(){
				var html = document.documentElement;
				var hWidth = html.getBoundingClientRect().width;
				/*console(hWidth);*/
				html.style.fontSize = hWidth/16 +"px";
			})()
		</script>
		
		<link rel="stylesheet" href="../css/bootstrap.css"/>
		<link rel="stylesheet" href="../css/index.css"/>
	</head>
	<body>
		<header id="header">
			<a id="task" href="javascript:;"><span class="glyphicon glyphicon-tasks"></span></a>
			<h1><span class="glyphicon glyphicon-lock"></span>miaov</h1>
			<a id="refresh" href="javascript:;"><span class="glyphicon glyphicon-repeat"></span></a>
		</header>
		<nav id="nav">
			<a class="active" href="javascript:;">综合<span class="glyphicon glyphicon-chevron-down"></span></a>
			<a href="javascript:;">销量</a>
			<a href="javascript:;">价格
				<span id="spanBox">
					<span class="glyphicon glyphicon-chevron-up"></span>
					<span class="glyphicon glyphicon-chevron-down active"></span>
				</span>
			</a>
			<a href="javascript:;">筛选<span class="glyphicon glyphicon-filter"></span></a>
		</nav>
		<section id="wrap">
			<ul id="list">
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/img.png" />
						<span id="spanWrap">
							<span class="sTitle">苹果（apple）iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
							<span class="sPrice">#房贷首付v</span>
							<span class="sComment">哈批评</span>
						</span>
					</a>
				</li>
			</ul>
		</section>
	</body>
</html>

---------------------------------index.css-----------------------------------------

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
button {
  -webkit-appearance: none;
  border-radius: 0;
}
body {
  margin: 0;
  -webkit-user-select: none;
}
body * {
  -webkit-user-select: none;
  font-family: helvetica;
}
body {
  -webkit-text-size-adjust: 100%;
}
h1 {
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  vertical-align: top;
}
html,
body {
  widows: 100%;
  height: 100%;
  overflow: hidden;
}
#header {
  height: 2.06rem;
  background-color: #ef3239;
  width: 16rem;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px solid #a82d31;
  box-sizing: border-box;
}
#header a {
  width: 2.56rem;
  height: 1.76rem;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 1.76rem;
}
#header #task {
  left: 0;
}
#header #task span {
  font-size: 0.74rem;
}
#header #refresh {
  right: 0;
}
#header #refresh span {
  font-size: 0.72rem;
}
#header span {
  color: #ffffff;
}
#header h1 {
  text-align: center;
  font-size: 0.78rem;
  color: #FFFFFF;
  line-height: 1.76rem;
}
#header h1 span {
  font-size: 0.52rem;
  margin-right: 0.2rem;
}
.active {
  color: #f23838 !important;
}
#nav {
  height: 2.1rem;
  width: 16rem;
  position: absolute;
  top: 2.06rem;
  left: 0;
  background-color: #fdfdfd;
  border-top: 1px solid #b0b0b0;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
#nav a {
  float: left;
  width: 25%;
  height: 2.06rem;
  text-align: center;
  line-height: 2.06rem;
  font-size: 0.7rem;
  color: #848689;
}
#nav #spanBox {
  width: 0.74rem;
  display: inline-block;
  vertical-align: middle;
}
#nav #spanBox span {
  float: left;
  font-size: 0.56rem;
}
#nav #spanBox .glyphicon-chevron-down {
  left: -0.02rem;
  top: -0.12rem;
}
#nav #spanBox .glyphicon-filter {
  font-size: 0.74rem;
  top: 0.6rem;
}
#list li {
  height: 5.62rem;
  border-bottom: 1px solid #e0e0e0;
  box-sizing: border-box;
}
#list a {
  padding: 0.46rem;
  height: 4.7rem;
  float: left;
}
#list img {
  width: 4.7rem;
  height: 4.7rem;
  float: left;
}
#list #spanWrap {
  float: right;
  width: 8.64rem;
}
#list .sTitle {
  font-size: 0.56rem;
  line-height: 0.88rem;
  color: #333;
  margin-top: 0.1rem;
  display: block;
}
#list .sPrice {
  display: block;
  font-size: 0.76rem;
  line-height: 1.28rem;
  margin-top: 0.62rem;
  color: #F23838 ;
}
#list .sComment {
  font-size: 0.56rem;
  line-height: 47 50rem;
  display: block;
}
#wrap {
  position: absolute;
  top: 4.16rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

在这里插入图片描述

猜你喜欢