移動端初識1
viewport(可視區窗口) <meta name="viewport" content="">（重要） 默認不設置viewport,一般可視區寬度在移動端是980. width: 可視區的寬度 (number||device-width) user-scalable 是否允許用戶縮放(yes||no),---->>ios10無效 initial-scale 初始縮放比例 minimum-scale 最小縮放比例 maximum-scale 最大縮放比例
<!--入門練習-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Rem適配</title>
<script type="text/javascript" src="js/two.js"></script>
<script>
(function(){
var html = document.documentElement;
var hWidth= html.getBoundingClientRect().width;
html.style.fontSize = hWidth/15+"px";
})()
</script>
<style type="text/css">
body,
h1,
ul {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
#header {
height: 2.06rem;
background: #ef3239;
position: relative;
border-bottom: 1px solid #a82d31;
box-sizing: border-box;
}
#header a {
width: 2.56rem;
height: 1.76rem;
position: absolute;
top: 0px;
text-align: center;
line-height: 1.76rem;
}
#header #task {
left: 0px;
}
#header #task span {
font-size: 0.74rem;
}
#header #refresh {
right: 0px;
}
#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.32rem;
}
.active {
color: #f23838 !important;
}
#nav {
height: 2.1rem;
background: #fdfdfd;
border-top: 1px solid #bobobo;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
#nav .active span {
font-size: 0.72rem;
top: 0.14rem;
left: 0.1rem;
}
#nav a {
float: left;
width: 25%;
height: 2.06rem;
text-align: center;
line-height: 2.06rem;
font-size: 0.7rem;
color: #848689;
}
#nav #price_box {
width: 0.74rem;
display: inline-block;
vertical-align: middle;
}
#nav #price_box span {
float: left;
font-size: 0.56rem;
}
#nav #price_box .glyphicon-chevron-down {
left: -0.05rem;
top: -0.08rem;
}
#nav .glyphicon-filter {
font-size: 0.74rem;
top: 0.16rem;
left: 0.1rem;
}
#list li {
background: #fdfdfd;
height: 5.62rem;
border-bottom: 1px solid #e0e0e0;
box-sizing: border-box;
}
#list a {
padding: 0.46rem 0.46rem 0.44rem;
height: 4.7rem;
float: left;
}
#list img {
width: 4.7rem;
height: 4.7rem;
float: left;
}
#list .soanWrap {
float: right;
width: 8.64rem;
}
#list .soanWrap .sTitle {
font-size: 0.56rem;
line-height: 0.88rem;
color: #333;
margin-top: 0.1rem;
display: block;
}
#list .soanWrap .sPrice {
display: block;
font-size: 0.76rem;
line-height: 1.28rem;
margin-top: 0.62rem;
color: #f23838;
}
#list .soanWrap .scommont {
font-size: 0.56rem;
line-height: 0.94rem;
display: block;
color: #808080;
}
</style>
<!--使用了bootstrap的字體樣式-->
<link rel="stylesheet" type="text/css" href="css/two.css">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.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>one界面</h1>
<a id="refresh" href="javascript:;">
<span class="glyphicon glyphicon-repeat"></span>
</a>
</header>
<nav id="nav">
<a href="javascipt:;" class="active">綜合<span class="glyphicon glyphicon-chevron-down"></span></a>
<a href="javascipt:;">銷量<span></span></a>
<a href="javascipt:;">價格<span id="price_box">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-chevron-down active"></span>
</span>
</a>
<a href="javascipt:;">篩選<span class="glyphicon glyphicon-filter"></span></a>
</nav>
<ul id="list">
<li>
<a href="javascript:;">
<img src="../images/img.png" />
<span class="soanWrap">
<span class="sTitle">蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機
</span>
<span class="sPrice">￥4888.00</span>
<span class="scommont">好評96% 59091人</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/img.png" />
<span class="soanWrap">
<span class="sTitle">蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機
</span>
<span class="sPrice">￥4888.00</span>
<span class="scommont">好評96% 59091人</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/img.png" />
<span class="soanWrap">
<span class="sTitle">蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機
</span>
<span class="sPrice">￥4888.00</span>
<span class="scommont">好評96% 59091人</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/img.png" />
<span class="soanWrap">
<span class="sTitle">蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機
</span>
<span class="sPrice">￥4888.00</span>
<span class="scommont">好評96% 59091人</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/img.png" />
<span class="soanWrap">
<span class="sTitle">蘋果(Apple) iphone 6(A1586) 16GB 金色 移動聯通電信4G手機
</span>
<span class="sPrice">￥4888.00</span>
<span class="scommont">好評96% 59091人</span>
</span>
</a>
</li>
</ul>
</body>
</html>
本文出自 “12897581” 博客，請務必保留此出處http://12907581.blog.51cto.com/12897581/1939835
移動端初識1