2020年史上最全移动端Web整理从开发基础到实战(三)

一、touch事件的缺陷

我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。

但是呢，touch 事件并不是完美的，不管是我们自己封装的 tap 事件，还是 zepto 自带的 tap 事件，在移动端都有一个致命的缺陷，就是“点透”。

什么是“点透”呢？

假如有两个盒子，盒子A和盒子B，如果盒子A在盒子B的上面，当我们使用 tap 事件点击盒子A的时候，盒子B会触发 click 事件，这就是点透。

触发这两个事件的顺序是 tap 事件，然后是 click 事件。因为 tap 事件内部是 touch 事件处理的，而 touch 事件是先于 click 事件触发的。

这个时候，我们既想无延时，又不想触发点透效果，而且有的时候，我们希望我们的网页不仅可以在移动端访问，在 PC 模式下也可以访问，但是 tap 事件只能在移动端使用，所以只能用 click 事件，但是 click 又有延时，怎么办呢？

我们知道， touch 事件只能在移动端使用，这个我们无法改变，所以我们只能改变延时的问题，于是我们就引入了 “fastclick.js” 库文件，解决 click 的延时问题。

使用方式：

1、引入 fastclick.js 文件。

2、在 script 中加入以下函数：

原生 js 的话，加入：

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
      	// document.body 表示整个body下的所有元素都是用fastclick效果，可以修改。
		FastClick.attach(document.body);
	}, false);
}

jQuery 或 Zepto 的话：

$(function() {
	FastClick.attach(document.body);
});

3、正常使用 元素.addEventListener("click", function(){}) 或者 元素.on("click", function(){}) ，来使用改装过后的 click 事件，这个 click 事件没有延时。

二、移动端的一些常用插件

见识到 fastclick 插件的好处之后，我们就挖掘出了更多好用的插件，可以大大提高我们开发的效率。

1、iScroll

以下为官方介绍：

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

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

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

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

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

API:http://caibaojian.com/iscroll-5/

使用方式：

1、希望你的结构如下，但是不限定标签（下面的 ul 可以改为 div，li 可以改为 p 等，不限定标签类型）。

    

        
...
        
...
        ...
    

2、在 script 标签中初始化 iScroll。

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

如果是 jQuery 的话更简单了，一句话：

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

3、如果想实现像滚轮，显示滚动条等效果，可以在初始化的时候，将这些需求作为对象，填入第二个参数中，比如，增加滚轮上下滚动操作和显示滚动条的效果：

var myScroll = new IScroll(".wrapper", {
  mouseWheel: true, // 使用滚轮
  scrollbars: true  // 显示滚动条
});

如此简单三步操作，就可以轻松实现你想要的功能。

2、swipe

swipe.js 是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常作为轮播图使用。

使用方法：

1、引入 swipe.js 文件

2、希望你的 html 结构为（不限定标签名称）：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div>div>
    <div>div>
    <div>div>
  div>
div>

3、对其格式进行设定（固定写法，最好不要修改，当然类名称需要修改）

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

3、在 script 中进行初始化操作：

window.mySwipe = Swipe(document.getElementById('slider'));

4、如果你想要自动轮播，滑动等操作，需要在初始化的第二个参数中，引入一个对象，比如：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,  // 默认显示第二张图片
  speed: 400,     // 过渡400ms
  auto: 3000,     // 轮播间隔 2s
  continuous: true,  // 循环轮播（默认开启）
  disableScroll: false,  // 禁止滑动（默认关闭）
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

5、当然你还可以在 PC 上使用左右两个按钮来上一张下一张翻页。swipe 会提供 next() , prev() 等函数来实现上一张下一张翻页。比如：

document.getElementById('btn1').onclick = function(){
  window.mySwipe.prev(); // 调用系统的prev()方法
};

document.getElementById('btn2').onclick = function(){
  window.mySwipe.next(); // 调用系统的next()方法
};

3、swiper

swiper 与 swipe 类似，都可以提供轮播触摸滑动的效果，只不过 swiper 能够提供的特效更多，更加炫酷，相应的体积也更大。

使用说明： 参考链接：http://www.swiper.com.cn/usage/index.html

需要注意的是，swiper 不同于 swipe，它也是结构固定，不限标签的，唯一的区别是类样式的名称是不可改变的。因为它引入了库文件的 css 样式。所以最好不要改变类样式的名称。具体的内容可以参考官网，有很多详细的使用说明和特效演示。

临时Tips：overflow:hidden 可以让子元素浮动的父盒子由高度为0，到自动伸缩。

三、响应式布局

常见的网页布局方式分为以下四种：

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。"

1、响应式布局

响应式布局，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验，如下图：

如上图所示，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用 媒体查询 可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。

2、响应式布局的缺点

我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

3、屏幕尺寸的划分

一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示

类型	布局宽度
大屏幕	>= 1200px
默认	>= 980px
平板	>= 768px
手机到平板之间	<= 767px
手机	<= 480px

4、媒体查询

参考链接：http://www.runoob.com/cssref/css3-pr-mediaquery.html

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code*/
}

/*或者引入不同样式文件的判断：当满足某个条件的时候，引入mystylesheet.css样式*/
"stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype 取值:

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

and|not|only：

and 同时满足，相当于 &&；

not 取反（一般写在 mediatype 前面）

示例：

media feature 取值：（主要关注以下三个宽度）

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

max-height 定义输出设备中的页面最大可见区域高度。

max-width 定义输出设备中的页面最大可见区域宽度。

min-height 定义输出设备中的页面最小可见区域高度。

min-width 定义输出设备中的页面最小可见区域宽度。

4.1、min-width 与 min-device-height 的区别

device 表示的是设备，所以加了 device 的 范围取值表示的是设备的宽度范围。

• 在移动端，由于通过模拟器改变的是移动端设备的宽度，所以 min-width 与 min-device-height 效果一样；
• 在 PC 端，如果改变浏览器的宽度，而我们电脑的宽度并没有改变，所以设备的宽度一定，最终的效果就是只有一个范围起作用。

4.2、案例：控制不同屏幕尺寸下屏幕背景色,

4.3、媒体查询条件判断的顺序

原因：如果结构如上面示例的那样，并且媒体查询条件由重叠的话，后面的媒体查询样式设置会覆盖前面的媒体查询设置，为了避免发生这种情况，我们就应该遵循一定的规律，使得不同的媒体查询条件下，执行不同的样式，而不会发生冲突。

特点：

向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内.

向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖

书写建议：

• 如果是判断最小值 (min-width)，那么范围就应该从小到大写
• 如果是判断最大值 (max-width)，那么范围就应该从大到小写

例如：

@media screen and (min-width: 768px){
  body{
    background-color: green;
  }
}
!*w:992!1200 blue  min-width: 992px:当屏幕的宽度大于等于992的时候*!
@media screen and (min-width: 992px){
  body{
    background-color: blue;
  }
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
  body{
    background-color: pink;
  }
}

四、Bootstrap

1、常见的响应式框架

随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。

常见的响应式框架有：

1、Bootstrap

官网：http://www.bootcss.com/

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。

2、Amaze UI

官网：http://amazeui.org/

中国首个开源 HTML5 跨屏前端框架。

Amaze ~ 妹子UI，国人开发，后起之秀！

3、Framework7

官网：http://www.framework7.cn/

Framework7 是一款免费、开源的移动HTML框架，主要用于开发混合手机App或者网页App，某些应用场景的体验几乎与原生开发的 iOS 和 Android 应用一模一样，同时也是一款不可获取的应用原型快速开发及展示工具。

Framework7 主要的作用就是让你有机会能够使用 HTML，CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。Framework7 是完全开放的，它完全没有限制你进行打开脑洞的创造，同时还提供了一些解决方案。

Framework7 并不支持所有平台。为了给你带来最好的体验感受，它只专注于 iOS 和 Google Material 设计风格。

2、bootstrap

Bootstrap是当前最流行的前端UI框架(有预制界面组件)

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstrap 的所有 JavaScript 插件都依赖 jQuery。

2.1、BootStrap的版本了解

• 2.x.x:兼容性好 / 代码不够简洁，功能不够完善
• 3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持一般 /偏向于响应式布局开发，移动设备优先的web项目开发
• 4.x.x:测试阶段，偏向于响应式，移动设备

2.2、bootstrap 基本模板

<html lang="zh-CN">
<head>
    
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    
    <title>Bootstrap 101 Templatetitle>
    
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    
    
    
    <script src="../lib/html5shiv/html5shiv.min.js">script>
    <script src="../lib/respond.js/respond.js">script>
    <![endif]-->
head>
<body>
<h1>你好，世界！h1>


<script src="../lib/jquery/jquery.js">script>

<script src="../lib/bootstrap/js/bootstrap.min.js">script>
body>
html>

2.3、bootstrap 布局容器

bootstrap 的 css 样式中，有一个起着支撑整个页面框架的容器，也叫布局容器，它类似于我们的版心结构。

1、.container 实现固定宽度并支持响应式布局的容器。

当屏幕宽度 > 1200，则页面宽度固定为 1170px
当屏幕宽度 992~1200，则页面宽度固定为 970px
当屏幕宽度 768~992，则页面宽度固定为 750px
当屏幕宽度 < 768，则页面宽度固定为 100%.

2、.container-fluid ：实现宽度为全屏 100% 的容器。

2.4、bootstrap 栅格系统

概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会默认分为12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。你可以使用类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

示例：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div>
div>

解释：上面四个div，如果在超小屏幕上就 100%显示（占12栅格）；在小屏幕上，每个div占50%显示；在中等屏幕上，每个div占25%显示；在大屏幕上，每个div占33.33%显示。

栅格参数：

.col-xs-：超小屏幕 手机 (<768px)

.col-sm- : 小屏幕 平板 (≥768px)

.col-md- : 中等屏幕 桌面显示器 (≥992px)

.col-lg- : 大屏幕 大桌面显示器 (≥1200px)

注意：

1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。

2.Row可以再次嵌套在列中。如果不能填满整列，则默认从左排列，如果超出，则换行展示。

2.5、列排序

• col-xs-offset-n：往右偏移 n 个栅格，但是会影响后面所有元素也偏移 n 个栅格。（内部通过 margin-left 实现的）
• col-xs-push/pull-n：push 往右推，pull 往左拉。往右偏移 n 个栅格，可能会与后面的元素重叠。（内部实现原理通过定位实现）

2.6、列嵌套

列嵌套就是列中还可以嵌套行，注意不能嵌套版心 container 和 container-fluid。

因为：

如果在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格；

如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度

<div class="container">
    <div class="row">
        <div class="col-xs-1">1div>
        <div class="col-xs-1">2div>
        <div class="col-xs-6">
            
            
                <div class="row">
                    <div class="col-xs-6">3div> 
                    <div class="col-xs-6">4div>
                div>
            
        div>
        <div class="col-xs-1">4div>
        <div class="col-xs-1">5div>
        <div class="col-xs-1">6div>
        <div class="col-xs-1">7div>
    div>
div>

2.7、响应式工具

（无向上兼容，内部实现是一个具体的范围，没有波及到其他区域）

.hidden-xs ：在超小屏幕下不可见

.hidden-sm ：在小屏幕下不可见

.hidden-md ：在中等屏幕下不可见

.hidden-lg ：在大屏幕下不可见

示例：

<div class="container">
    <div class="row">
        <div class="col-xs-1 hidden-sm">1div> 
        <div class="col-xs-1 hidden-xs">2div> 
        <div class="col-xs-6 hidden-lg">        
        <div class="col-xs-1">4div>
        <div class="col-xs-1">5div>
        <div class="col-xs-1">6div>
        <div class="col-xs-1">7div>
    div>
div>

五、Less

1、Less简介

LESS 是一种动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，本质上，LESS 包含一套自定义的语法及一个解析器。

2、less 安装

1、下载安装 node.js 环境。（官网：https://nodejs.org/zh-cn/）

2、安装完成后验证 node 环境是否安装成功。

在命令行中输入：node -v 出现 node 的版本号表示安装成功。

3、安装 less 工具（需要联网）。

在命令行中输入：npm install -g less 即可下载安装。

4、安装后验证 less 是否安装成功。

命令行输入：lessc -v 出现 less 版本号，即表示安装成功。

3、编译

浏览器只能识别 CSS，Less 只是用来提升CSS可维护性的一个工具，所最终需要将LESS编译成CSS。

编译方式有两种：

1、一种是使用命令行的方式手工编译。

在我们编写好一个 less 文件后，可以使用命令行输入以下指令将 less 文件编译成 css 文件。

lessc .\test.less .\test.css

这种手工编译的方式效率比较低下，一般我们都会借助一些编辑器来完成自动编译。

2、这里我使用 vscode，使用很简单，只需要安装插件 “Easy LESS” ，那么编写的 less 文件在保存时会自动在 less 文件相同的目录下生成 css 文件。

4、语法

1、注释

注释的方式有两种：// 或者 /**/ 。

但是这两种注释有区别：这两种样式在 less 中都是注释，但是 // 注释不会进行编译，也就是不会在生成的 css 文件中显示，而 /**/ 注释则会在 css 文件中对应显示。

/*注释  才会编译*/
//这也是样式，但是不会进行编译

2、变量

语法格式为：@变量名：值; ，比如 @baseColor: #ccc;

使用的时候： div { color: @baseColor;}

/*变量  @变量名:值; */
@baseColor:#e92322;
a{
  color: @baseColor;
}

3、混入（类似于函数）

语法：.样式名(@变量名 ：默认值) {具体样式}

/*混入:可以将一个定义好的样式引入到另外一个样式中  类似于函数的调用*/
/*.addRadius{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}*/
/*相当于定义一个函数的参数*/
.addRadius(@r:10px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*引入已经写好的圆角样式*/
  /*传入参数*/
  .addRadius(5px);
}

4、嵌套

嵌套可以实现选择器的继承，可以减少代码量，同时使用代码结构更加清晰。

/* 以前我们写的样式
.jd_header{}
.jd_header > div{}
.jd_header > div > h3{}
.jd_header > div > h3::before{}
.jd_header > div > a{}
.jd_header > div > a:hover{}
*/


/*嵌套:实现选择器的继承，可以减少代码量，同时使用代码结构更加清晰*/
.jd_header{
  width: 100%;
  height: 200px;
  .addRadius();
  // 加 > 表示直接子元素
  > div{
    // 加 & 表示中间没有空格为 div::before，如果没有 & 则是 div ::before 就错了。
    &::before{
      content: "";
    }
    width: 100%;
    // div下面的直接子元素a
    >a{
      text-decoration: underline;
      // a::hover，中间没有空格
      &:hover{
        text-decoration: none;
      }
    }
    > h3{
      height: 20px;
    }
    ul{
      list-style: none;
    }
  }
}

5、less 文件引入

我们之前编写好 less 文件之后，都是自动解析成 css 然后添加到 html 文件中。如果 css 的文件很多的话，就要引入很多个 link 标签，那么可不可以直接引入 less 文件呢？

当然可以。

语法：

<link rel="stylesheet/less" href="./index.less">

只是在 stylesheet 后面加上 less 的说明。

只是引入 less 文件是不可以的，还需要引入解析 less 的 js 插件。

<script src="./js/less.js">script>

看起来好麻烦哦，为什么要引入 less 文件，它有什么好处吗？

好处是：不管有多少 less 文件，只需要引入一个 less 文件就可以了，其他需要的 less 文件都包含在引入的这个 less 文件中。

如何在 less 文件中引入其他 less 文件呢？

语法：

@import "other1.less";  // other.less 为其他 less 文件的路径名称
@import "other2.less";
@import "other3.less";

这样，不管有多少个 less 文件，都可以写到一个待引入的 less 文件中。

最后

还有2件事拜托大家

一：求赞 求收藏 求分享 求留言，让更多的人看到这篇内容

二：欢迎添加我的个人微信

备注“资料”， 300多篇原创技术文章，海量的视频资料即可获得

备注“加群”，我会拉你进技术交流群，群里大牛学霸具在，哪怕您做个潜水鱼也会学到很多东西