移动端初识1

简介:
1
2
3
4
5
6
7
8
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>


本文转自 沉迷学习中 51CTO博客,原文链接:http://blog.51cto.com/12907581/1939835,如需转载请自行联系原作者

相关文章
|
23天前
|
域名解析 JSON 测试技术
常见移动端APP测试场景
常见移动端APP测试场景
|
2月前
|
SQL 安全 算法
移动端安全基础
移动端安全基础
|
3月前
|
移动开发 前端开发 小程序
移动端常用的四个框架
移动端常用的四个框架
54 0
|
3月前
|
移动开发 前端开发 小程序
移动端最常用的四个框架
移动端最常用的四个框架
35 0
|
3月前
|
iOS开发
移动端iPhone系列适配问题的一些坑
移动端iPhone系列适配问题的一些坑
37 0
|
6月前
|
前端开发
从头学前端-移动端布局
从头学前端-移动端布局
|
10月前
|
Web App开发 移动开发 缓存
移动端H5网页开发常见问题汇总
H5网页开发常见问题汇总
361 0
|
编解码 前端开发
基本的移动端适配
一个项目一般拥有移动端和pc端的产品图 我们为了减少工作量会在开发pc端时同时使它适配移动端
78 2
ADI
|
Web App开发 编解码 移动开发
[月分享] 我对移动端适配的了解
[月分享] 我对移动端适配的了解
ADI
121 0
|
Web App开发 前端开发 测试技术
移动端前端开发资料
移动端前端开发调试 详细介绍了如何做响应式测试。移动端包括web和应用的有效测试方法。资料持续更新中 在线响应式测试网站:http://www.browserstack.com/responsive 在线响应式截图:http://www.
747 0