移动端微金所项目知识点总结

1，媒体查询：使用媒体查询能针对不同屏幕区间设置不同的布局和样式

语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}

//1. 超小屏设备 768px以下
@media screen and (max-width: 768px) {  }
//2. 小屏设备 768px-992px
@media screen and (min-width: 768px) and (max-width: 992px) {  }
//3. 中屏设备 992px-1200px
@media screen and (min-width: 992px) and (max-width: 1200px) {  }
//4. 大屏设备 1200px以上
@media screen and (min-width: 1200px) {  }

1.1 媒体查询的其他写法扩展(可以省略 screen )

div {background: green;}
@media (min-width: 768px) { div {background: yellow;} }
@media (min-width: 992px) { div {background: blue;} }
@media (min-width: 1200px) { div {background: red;} }

以上写法也能够实现：
超小屏设备 768px以下，div为绿色；
小屏设备 768px-992px，div为黄色；
中屏设备 992px-1200px，div为蓝色；
大屏设备 1200px以上，div为红色。

2，使用bootstrap的基本模板

<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en英文 zh-CN简体中文 zh-tw繁体中文 -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="UTF-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, inicial-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>基本模板</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 用来解决IE8及以下版本浏览器不支持 H5标签 的问题-->
    <!-- respond 用来解决IE8及以下版本浏览器不支持 媒体查询 的问题 -->
    <!-- 警告： 应用Respond.js时，不能以file形式打开，本地打开。最好http://打开(服务器方式打开) -->

    <!-- 在 IE 9 以下引入-->

    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->

</head>
<body>
内容

<!-- bootstrap依赖jquery，所以要引入jquery.js文件 -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- 引入 bootstrap.js 核心文件-->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

3，normalize.css 插件的作用：增强不同浏览器的默认样式道的表现一致性

normalize.css 与自己写的 reset.css（重置样式）的区别：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素。

共同点：都是重置样式库，增强浏览器的表现一致性
不同点：
举个例子：ul
reset.css list-style:none —— 因为需求
normalize.css 不会重置ul样式 —— 本身已经在每个浏览器表现一致的元素

4，bootstrap的基本样式

类名 container 表示容器为响应式容器：（默认有15px的左右内边距）
- 在超小屏设备的时候（768px以下），当前容器的宽度100%
- 在小屏设备的时候（768px-992px），当前容器的宽度750px居中
- 在中屏设备的时候（992px-1200px），当前容器的宽度970px居中
- 在大屏设备的时候（1200px以上），当前容器的宽度1170px居中
类名 container-fluid 表示容器为响应式容器：容器的宽度始终100%。（默认有15px的左右内边距）

5，栅格系统：

行和列的网格状布局，类名 row 表示行，类名 col-#-# 表示列，#代表不确定（参数）。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。

col-#-#：列样式-
第一个’#’：屏幕的大小
- 大屏设备 lg 大屏设备以上生效包含本身
- 中屏设备 md 中屏设备以上生效包含本身（包括大中屏）
- 小屏设备 sm 小屏设备以上生效包含本身（包括大中小屏）
- 超小屏设备 xs 超小屏设备以上生效包含本身（包括大中小和超小屏）
第二个’#’：每一行的分等份，默认分成12等份，数字代表的是占多少份（设置超过12则不生效）

<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>

6，栅格系统扩展功能（栅格系统都是默认向左对齐的，行和列都有15px的左右内边距）

栅格嵌套 (内层的行和列通过左右外边距设为-15px 使得内层栅格填充满外层栅格，解除外层栅格15px的左右内边距)

<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

列的偏移：offset 向右偏移多少等分

<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-6 col-xs-offset-1"></div>
    </div>
</div>

列的排序：push–往后推；pull–往前拉

<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
        <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
    </div>
</div>

列的偏移(offset) 与列的排序(push) 的区别
- 偏移的底层思想是使用 margin-left，使用偏移的列会强制其他列移动
- 排序(push)的底层思想是使用定位，使用排序的列不会影响其他列的位置，列与列之间可以重叠

7，响应式工具：显示与隐藏

    例如有如下需求：
            大屏设备    显示； 中屏设备    隐藏； 小屏设备    显示；  超小屏设备  隐藏。

    设置元素显示的类样式
            visible-lg     大屏显示其他隐藏
            visible-md
            visible-sm
            visible-xs
     设置元素隐藏的类样式（3.2版本以后 ，建议使用hidden，不建议使用visible）
            hidden-lg      大屏隐藏其他显示
            hidden-md
            hidden-sm
            hidden-xs

8，+,~选择器：

‘+’: 紧邻的下一个兄弟元素
‘~’: 后面所有的兄弟元素

9，使用bootstrap组件的思路：

遇到比较通用的模块（导航条、轮播图）先考虑bootstrap中有没有类似的组件和插件
找到插件或组件的失示例后，先分析HTML代码的结构，哪一个模块对应哪部分
根据自己的结构需求调整好html元素
开始修改样式，有的元素的样式完全自己写，一些需要覆盖的bootstrap的css样式，就可以根据该组件顶层的样式，点进bootstrap.css文件中，将其样式下的所有样式代码拷贝在自己的css文件中，进行修改覆盖。这样可以避免自己重写样式时，由于选择器的层级不够高而导致的无法覆盖原始bootstrap中css样式的问题。
一些特殊属性可以省略：
- aria-expanded=“false”（默认不展开） aria-* 代表提供给屏幕阅读器使用的（盲人阅读器）
- class=“sr-only” screen read only 代表提供给屏幕阅读器使用的（盲人阅读器）
- roleh属性也是提供给屏幕阅读器使用的（盲人阅读器）

10，collapse组件

切换按钮：

属性：
data-toggle=“collapse” 申明是什么组件=折叠组件
data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器
如果用a标签作为切换按钮，data-target 的值可以直接赋给a的href属性，能够实现相同的效果

11，响应式轮播图的思路

要求：
1. 小屏、中屏和大屏下，轮播图的高度固定，宽度自适应
2. 超小屏下，轮播图宽度自适应，高度随宽度的变化而进行缩放
实现：
1. 小屏、中屏和大屏下，设置一个div，宽度100%，高度固定，为其设置用于轮播的背景图，设置background-repeat=no-repeat; background-position=center; background-size=cover;
2. 超小屏下，直接放img图片，设置图片的 width=100%; height=auto;

12，使用art-template模板引擎利用后台数据进行异步渲染的步骤：

html中：（利用script标签作为模板，用来接收js中template方法传来的参数，并生成html结构作为js中template方法的返回值）

<script type="text/template" id="pointTemplate">
    <% for(var i=0;i<list.length;i++){ %>
        <li data-index="<%=i%>" class="<%=i==0?'active':''%>">内容</li>
    <% } %>
</script>

JS中：（template方法的第一个参数表示html中对应的script标签的ID值，第二个参数必须是花括号形式的对象参数）

// 这里由于data是[]形式的数组对象，所以需要给它加个键名与其本身组合成一个花括号形式的对象，然后才能传值
var pointHtml=template("pointTemplate",{list:data});//返回值为利用数据生成的html结构
$(".carousel-indicators").html(pointHtml);// 将生成的html结构加入到页面对应的位置，并进行渲染

13，json格式的字符串与json对象的区别

json是一种特殊结构的字符串，其本质是字符串，是一种轻量级文本数据交换格式。它的格式非常严格，以冒号为键值对，中括号为数组，花括号为对象，属性名称必须加引号，且是双引号，字符串必须是双引号，数字的字符串可以省略，最后一个键值对必须没有逗号。
而json对象（就是JS中的对象），是一种特殊格式的数据类型，且格式要求比json格式的字符串的格式要求宽松的多。
JS中存在json到js对象的转换：
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
也存在js对象到json的转换：
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

14，新学到的选择器： :nth-of-type(n)、:first-of-type 和 :last-of-type

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，其中 n 可以是数字、关键词（odd/even）或公式。
而 :nth-child() 选择器，该选择器选取该元素的父元素的第 N 个子元素，与类型无关，找到后再判断类型是否匹配(如果第 N 个子元素不是这个类型，这个选择器就是无效选择器)。
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:last-of-type 选择每个p元素是其父级的最后一个p元素
p:nth-last-of-type(n) 选择每个p元素是其父级的倒数第N个p元素

15，复习jQuery获取宽度相关的API

    width()  内容
    innerWidth() 内容+内边距
    outerWidth() 内容+内边距+边框
    outerWidth(true) 内容+内边距+边框+外边距

16，自己实现触摸滑动效果，或者使用插件（iscroll.js）实现某个元素内的触摸滑动效果时，最好先使用e.preventDefault()清除掉移动设备的touchmove事件的默认页面滑动效果。

17，复习box-shadow属性（box-shadow: 0 0 10px 10px hotpink inset;）

    参数1：x轴的偏移
    参数2：y轴的偏移
    参数3：阴影的模糊宽度（颜色过渡的宽度）
    参数4：阴影的延伸（设置的颜色增加多少宽度）
    参数5：阴影的颜色
    参数6：内阴影（向内延伸和过渡）

移动端web总结（二）——微金所项目总结