首页 > 代码库 > 移动端初识1

移动端初识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="http://www.mamicode.com/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="http://www.mamicode.com/css/two.css">

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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="http://www.mamicode.com/javascipt:;" class="active">综合<span class="glyphicon glyphicon-chevron-down"></span></a>

<a href="http://www.mamicode.com/javascipt:;">销量<span></span></a>

<a href="http://www.mamicode.com/javascipt:;">价格<span id="price_box">

<span class="glyphicon glyphicon-chevron-up"></span>

<span class="glyphicon glyphicon-chevron-down active"></span>

</span>

</a>

<a href="http://www.mamicode.com/javascipt:;">筛选<span class="glyphicon glyphicon-filter"></span></a>

</nav>

<ul id="list">

<li>

<a href="javascript:;">

<img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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