移动web笔记

1.移动web基础

1.1移动端开发现状

• 移动web 开发指的是需要适配移动设备的网页开发
• 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术

1.2移动端与pc端 web开发的区别

1）浏览器不同

移动端的浏览器与pc端不同

谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器  百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。

因此在移动端，css3属性只需要加webkit前缀即可。

2）屏幕尺寸

移动端设备尺寸不一样(尺寸非常多，碎片化很严重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

让页面在不同手机屏幕中进行适配，宽度自适应， 基于手机全屏进行布局；

PC: 要适配所有pc端页面用版心， pc基于版心进行布局的

3）布局方式

移动端的特点

• 手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新（对H5的支持比较好）
• 手机端屏幕比较小，能够放的内容比较少。

问题：布局的时候怎么解决屏幕大小不一致的问题？

• PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东
• 移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

流式布局的特征：

• 宽度自适应，高度固定，并不是百分百还原设计图

流式布局无法做到所有设备都非常逼真的还原设计图，有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式，比较简单，需要掌握（携程、京东)

1.3视口viewport（重要）

问题：一个电脑上的网站，在手机端访问，效果是什么样的？

1. 在手机端，html的大小都是980px，为什么？
这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，
移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。
为了解决这个问题，移动端html的大小直接就定死成了980px（因为早起的pc端网站版心就是980px居多）。


2. 视口
在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，
但是在移动端，多出来了一个视口的概念（乔布斯）,视口是移动端一个虚拟的布局区域，
视口的宽度默认定死了980px，因此html的宽度默认就是980px，视口的特点是能够根据设备的宽度进行缩放。


3. 视口设置。
对于现在的移动端页面来说，视口默认为980px肯定不合适，因为设备宽度不够的话，视口会进行缩放，导致页面展示效果不好看。

视口参数设置

//width 设置视口的宽度
//width=device-width   设置视口宽度为设备的宽度（常用）。

//initial-scale 设置初始缩放比例
//initial-scale=1.0  表示不缩放

//user-scalable 设置是否允许用户缩放
//user-scalable=no  不允许用户缩放

//maximum-scale  设置允许的最大缩放比例
//maximum-scale=1.0  可以不设置，因为都禁止用户缩放了。

//minimum-scale 设置允许最小缩放比
//minimum-scale=1.0  不设置，因为都禁用用户缩放了。


//标准写法：
//快捷键：  meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

1.4 屏幕与分辨率（了解）

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

1）屏幕尺寸

通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）1英寸 = 2.54厘米

2）屏幕分辨率

分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，相同尺寸下分辨率越高，越清晰。

像素：指计算机显示设备中的最小单位，即一个像素点的大小。

像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。

1.5物理像素 和 css像素

物理像素

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

css像素

逻辑像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320px*480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

像素比

物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

获取设备的像素比

window.devicePixelRatio  //物理像素与CSS像素的比值

1.6 2倍图与3倍图（重要）

以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.

把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

设备像素比devicePixelRatio：即像素的压缩比例

结论 ：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。

1.7移动端调试问题

1. 模拟器调试
2. 真机调试：使用手机进行访问。

手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。

2.less

2.1Less简介

CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

(less css预处理器)

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。

学习网站：

中文网: http://lesscss.cn/

2.2less的编译

如何把less文件变成css文件

1）引入less.js文件（了解）

<!-- 必须指定rel的类型是stylesheet/less --> 
<link rel="stylesheet/less" href="less/01.less">
<script src="less.js"></script>

注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。

缺点：

1. 需要多引入一个less.js文件
2. 需要多一次http请求，file协议打开无效
3. 无法实时的看到编译的结果。

2）使用考拉

koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

考拉官网

使用步骤：

1. 把less文件夹拖进去
2. 会在当前目录生成一个css目录

3）VScode 安装 Easy LESS 插件

2.3Less语法

1）less初体验

新建一个less文件，输入以下代码:

@color:red;
p {
  color:@color;
}

可以看到，webstorm自动的帮我们生成了对应的css文件。

2）注释

/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

3）变量

@charset "UTF-8";
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

4）mixin混入

混入样式类

@charset "UTF-8";
//混入
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}

.btn_border {
  border: 1px solid #ccc;
}

.btn_danger {
  background-color: red;
}

.btn_block {
  display: block;
  width: 100%;
}

//混入其他类的样式。
.my_btn {
  .btn();
  .btn_block();
  .btn_border();
  .btn_danger();
}

编译后的css

@charset "UTF-8";
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}
.btn_border {
  border: 1px solid #ccc;
}
.btn_danger {
  background-color: red;
}
.btn_block {
  display: block;
  width: 100%;
}
.my_btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  background-color: red;
}

缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。

5）混入函数

不带参数的函数

@charset "UTF-8";

//不会被编译
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

带参数的函数

.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函数定义了参数，调用的时候必须传入参数，否则会报错
  .btn_border();
  //传入参数，就不会报错
  .btn_border(10px);
}

带默认值的函数

.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因为有默认值，所以不会报错
  .btn_border();
  //传入参数，会覆盖1px，也不会报错
  .btn_border(10px);
}

6）嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

• 使用伪类的时候 可以使用& 表示自己

编译前

.wjs_header {
  border-bottom: 1px solid #ccc;
  .header_item {
	  height: 40px;
	  line-height: 40px;
	  text-align: center;
	  border-left: 1px solid #ccc;
	  &:first-child {
 		 border-left: none;
 		}
	}
}

编译后

@charset "UTF-8";
.wjs_header {
  border-bottom: 1px solid #ccc;
}
.wjs_header .header_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.wjs_header .header_item:first-child {
  border-left: none;
}

7）导入

@charset "UTF-8";

@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。

8）函数

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

3.touch事件

移动端新增了4个与手指触摸相关的事件

touchstart  //手指放到屏幕上时触发
touchmove   //手指在屏幕上滑动式触发（会触发多次）
touchend    //手指离开屏幕时触发
touchcancel //系统取消touch事件的时候触发,比如电话

每个触摸事件被触发后，会生成一个event对象，event对象中changedTouches会记录手指滑动的信息。

e.touches;//当前屏幕上的手指
e.targetTouches;//当前dom元素上的手指。
e.changedTouches;//触摸时发生改变的手指。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下

clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY:     //触摸点相对于页面的位置
screenX / screenY  //触摸点相对于屏幕的位置

4.BFC （块级格式化上下文）

Block Formatting Context: 页面上一个隔离的独立渲染区域

4.1触发成为 BFC 盒子的特点

• 触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素

  应用: 解决塌陷问题, 清除浮动

• 触发了BFC的普通盒子, 不会与浮动元素重叠

  应用: 圣杯布局, 左侧固定右侧自适应

4.2如何触发 BFC

• float: left; float: right;

• overflow的值不为visible。

• display的值为table, table-cell

• position的值absolute, fixed

5.iScroll API 中文版

5.1介绍

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

官网：http://iscrolljs.com/

它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

• 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
• 动画可以使用用户自定义的擦出功能（反弹’bounce’，弹性’elastic’，回退’back’，…）。
• 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

5.2快速入门

最好的学习iScroll的方法是看示例。在存档文件中你会发现一个叫做demo的文件夹示例。这里有大多数脚本功能的概述。

IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的IScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁,最佳的HTML结构如下：

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。

最基本的脚本初始化的方式如下：

<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>

第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:

var myScroll = new IScroll('.wrapper');

注意 ：iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。

注意 ：当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。

6.Animate.css动画库

Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。

1、首先引入animate css文件

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

2、给指定的元素加上指定的动画样式名

​ 这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

	<div class="animated bounceOutLeft"></div>

3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

	$('#yourElement').addClass('animated bounceOutLeft');

4、当动画效果执行完成后还可以通过以下代码添加事件

	$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

  $(function(){
      $('#jq22').addClass('animated bounce');
  });

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

  $(function(){
      $('#jq22').addClass('animated bounce');
      setTimeout(function(){
          $('#jq22').removeClass('bounce');
      }, 1000);
  });

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

	#jq22{
      animate-duration: 2s;    //动画持续时间
      animate-delay: 1s;    //动画延迟时间
      animate-iteration-count: 2;    //动画执行次数
  }

7.关于tap事件与click事件

1.click事件在pc端非常用，但是在移动端会有300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只有当没有后续的的动作发生时，才会触发click事件
2.tap事件（自己封装的事件）只要轻触了，就会触发，体验更好。

/*
 * 由于移动端的点击事件click 有300左右的延迟， 用户体验有待提升
 *  希望 能用touch事件封装一个相应速度更快的 点击事件 tap
 *
 *   touch判断为点击事件的条件：
 *
 *   1、触屏开始 到触屏结束  手指没有移动
 *   2、接触屏幕的时间 小于指定的值 150ms *
 *
 *   满足以上两个条件 可以认为是点击事件触发了
 * */


/*
* 插件功能：
*   给指定的元素 绑定优化后的移动的点击事件--- tap事件
* 参数：
*   obj:要绑定优化后点击事件的元素
*   callback: 当点击事件触发 执行什么操作
* */

var itcast={
    tap:function(obj,callback){
        if(typeof obj=='object'){ //判断传入的obj是否为对象

            var startTime=0;//记录起始事件
            var isMove=false; //记录是否移动

            obj.addEventListener('touchstart',function(){
                startTime=Date.now(); //获取当前时间戳
            });

            obj.addEventListener('touchmove',function(){
               isMove=true; //记录移动

            });

            obj.addEventListener('touchend',function(e){
                //判断是否满足点击的条件
                if(!isMove&&Date.now()-startTime<150){
                    //tap点击事件触发
                    //if(callback){
                    //    callback();
                    //}
                    callback&&callback(e);
                }

                //数据重置
                isMove=false;
                startTime=0;
            });
        }
    }
}

8.zepto框架介绍（了解）

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

github地址

中文文档

1.zepto与jquery的区别

• jquery针对pc端，主要用于解决浏览器兼容性问题，zepto主要针对移动端。
• zepto比jquery轻量，文件体积更小
• zepto封装了一些移动端的手势事件

2.zepto的基本使用

zepto的使用与jquery基本一致，zepto是分模块的，需要某个功能，就需要引入某个zepto的文件。

<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>

  $(function () {
    $(".box").addClass("demo");

    $("button").on("click", function () {
      $(".box").animate({width:500}, 1000);
    });
  });


</script>

3.zepto的定制

安装Nodejs环境

1、下载zepto.js

2、解压缩

3、cmd命令行进入解压缩后的目录

4、执行npm install命令

5、编辑make文件的41行,添加自定义模块并保存，

7、然后执行命令 npm run-script dist

8、查看目录dist即构建好的zepto.js

4.zepto手势事件

zepto中根据touchstart touchmove touchend封装了一些常用的手势事件

tap   // 轻触事件,用于替代移动端的click事件，因为click事件在老版本中会有300ms的延迟
	//穿透的问题    fastclick:
swipe //手指滑动时触发
swipeLeft  //左滑
swipeRight  //右滑
swipeUp    //上滑
swipeDown   //下滑

9.响应式

9.1 什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

• 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
• 通常的做法是针对移动端单独做一套特定的版本。
• 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
• 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

**缺点： **

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

响应式开发现状：

• 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
• 在新建站点 上采用响应式开发的越来越多。
• 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

9.2 响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简洁，加载快	代码相对复杂，加载慢

10.媒体查询

媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

10.1 设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

10.2 媒体查询的使用

需求：

<!--
需求：
    大屏设备(>1200px)   版心：1170px   背景色：红色
    中屏设备(992-1200)  版心：970px    背景色：蓝色
    小屏设备(768-992)   版心：750px    背景色：黄色
    超小屏设备(<768px)  版心：100%     背景色：绿色
-->

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

11.bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

• 组件简洁大方、代码规范精简、界面自定义性强。
• Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
• Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

• 有自己的生态圈，不断的更新迭代
• 提供了一套简洁、直观、强悍的组件
• 标准化的HTML+CSS编码规范
• 让开发更简单，提高了开发效率。
• 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

• 2.x.x 停止维护
  • 优点：兼容性好
  • 缺点：代码不够简洁、功能不够完善
• 3.x.x 目前使用最多
  • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
  • 缺点：放弃了IE67，对IE8支持但是界面效果不友好
• 4.x.x 刚发布

11.1 基本模板

目录结构说明

<!DOCTYPE html>
<!--使用HTML5文档，使用中文简体-->
<html lang="zh-CN">
<head>
  <!--meta1. 使用utf-8编码-->
  <meta charset="utf-8">
  <!--meta2. 当前页面在在IE浏览器访问时，使用最新的ie浏览器内核进行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--meta3. 视口设置-->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ -->
  <title>bootstrap基本模板</title>
  
  <!--引入bootstrap的核心样式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- html5shiv是用来解决IE8以下浏览器不支持HTML5语义化标签的问题 -->
  <!--respond是用来解决IE8以下浏览器不支持媒体查询的问题，注意：respond不支持file协议打开-->
  <!--条件注释：IE浏览器专属-->
  <!--[if lt IE 9]>
  <script src="lib/html5shiv/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!--bootstrap依赖与jquery，因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

11.2 全局样式

1) normalize.css

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

官网

github网址

normalize的特点：

• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Normalize.css与CSS reset区别

2) container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

3) 栅格系统

栅格系统，也叫网格系统

• .row用于抵消.container容器的15px的padding值
• 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-6	在大屏幕及生效，占1/2

【案例：响应式栅格系统】

<!--
需求：
  1. 在大屏时显示6个等分的列
  2. 在中屏时显示4个等分的列
  3. 在小屏时显示3个等分的列
  4. 在超小屏时显示2个等分的列
-->

【案例：列嵌套.html】

<div class="col-lg-4">
      <!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统-->
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>

【案例：列偏移.html】

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row">
  <div class="col-lg-3"></div>
  <!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位-->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

4)响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

12.REM

12.1 各种布局特征的对比

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。

通常解决方案如下：

• 流式布局：可以让各种屏幕都适配，只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发效率高, 成本低, 目前使用流式布局的公司还是非常多的，比如 亚马逊 、京东 、携程
• 响应式布局：国内很少有大型网站使用，主要原因是工作大，可维护性不好 。所以一般都是中小型的门户或者博客类站点会采用响应式，因为这样可以节约成本。
• rem布局：rem能够实现宽高自适应的布局方式， 目前使用rem布局的有：淘宝 、 苏宁

12.2 rem与em

rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。

em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。

html{
  font-size:16px;
}
body {
  font-size:20px;
}
div.em {
  /*em的计算方式参照的当前元素的font-size，如果不设置，默认继承自父盒子*/
  width:2em;
  height:2em;
  background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
  width:2rem;
  height:2rem;
  background-color:blue;
}

12.3 rem与响应式

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

12.4 rem与媒体查询

使用rem配合媒体查询可以适配多个终端,通常设置1rem为当前屏幕的1/10
// 320 360 375 384 400 414 424 480 484 540 720 750

    @media (min-width: 320px) {
      html {        
        font-size: 32px;
      }
    }
    @media (min-width: 375px) {
      html {
        font-size: 37.5px;;
      }
    }
    @media (min-width: 414px) {
      html {
        font-size: 41.4px;;
      }
    }
    @media (min-width: 480px) {
      html {
        font-size: 48px;;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 64px;
      }
    }
    @media (min-width: 750px) {
      html {
        font-size: 75px;;
      }
    }

优点：使用媒体查询适配，速度快。

缺点：适配多个终端时，需要添加响应的代码。

12.5 rem与javascript

通过javascript获取可视区的宽度，计算font-size的值，也可以适配多个终端。

var design = 750;

function setRem() {
  var pageWidth = window.innerWidth;

  if ( pageWidth <= 320 ) {
    pageWidth = 320;
  }

  if ( pageWidth >= 750 ) {
    pageWidth = 750;
  }

  var size =  design / pageWidth;
  document.documentElement.style.fontSize = size + "px";
}

setRem();
window.addEventListener("resize", setRem);

优点：直接适配所有的终端

缺点：必须在页面加载之前设置html的font-size值，不然会出现文字大小调动的情况。

移动端自适应解决方案 flexible.js 自动设置rem

https://github.com/amfe/lib-flexible

https://www.awesomes.cn/repo/amfe/lib-flexible

13.swiper插件

开源、免费、强大的移动端触摸滑动插件

地址 ：https://3.swiper.com.cn/

13.1 Swiper使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

2.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}  

4.初始化Swiper：最好是挨着标签

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。