移动web开发

Veröffentlicht am

掌握移动端常见适配方案
能够理解移动端常见效果
能够独立完成响应式开发
掌握CSS预编译脚本语言

《京东项目》

移动web开发现状
  • 移动web开发指的是需要适配移动设备的页面开发
  • 移动web和桌面web没有本质的区别都使用css、html与js

  • 那么在移动端开发页面需要注意什么：

    • 移动端浏览器

      1
      2
      UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器
      国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的

    • 移动设备尺寸

      1
      2
      3
      大家都知道移动端设备屏幕尺寸非常多，碎片化严重。
      尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K,4k屏。
      近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
移动端适配问题
设备 尺寸(英寸) 开发尺寸(px) 物理像素比(dpr)
iphone3G 3.5 320*480 1.0
iphone4/4s 3.5 320*480 2.0
iphone5/5s/5c 4.0 320*568 2.0
HTC One M8 4.5 360*640 3.0
iphone6 4.7 375*667 2.0
Nexus 4 4.7 384*640 2.0
Nexus 5x 5.2 411*731 2.6
iphone6 Plus 5.5 414*736 3.0
Samsung Galaxy Note 4 5.7 480*853 3.0
Sony Xperia Z Ultra 6.4 540*960 2.0
Nexus 7 (‘12) 7.0 600*960 1.3
iPad Mini 7.9 768*1024 1.0

注：以上数据均参考 https://material.io/devices/ ,一个设备尺寸统计网站。
注：作为前端开发不建议大家去纠结dp,dpi,pt,ppi等单位,因为它们有复杂的转换关系。

流式布局
  • 流式布局,就是百分比布局,也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 这样的布局方式,是移动web开发使用的最常用布局方式。
viewport

解释：视觉窗口
作用：这是一个虚拟的区域，用来承载网页的区域，在浏览器可视窗口和网页之间。
现象：有一些设备viewport的默认宽度是980px,网页内容显示在里面，为了能在320px屏幕内显示，会自动缩放。
在移动端有特殊的功能：可以设置宽度和高度，可以设置缩放比例，控制缩放的比例，控制用户是否可以自行缩放。

适配有三点事情需要去做：

  1. 页面的宽度和设备样宽
  2. 默认的缩放比例是1.0
  3. 不允许用户去缩放页面
属性 解释
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

标准的viewport设置：

  • 视口宽度和设备保持一致
  • 视口的默认缩放比例1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例1.0
  • 最小允许的缩放比例1.0
    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
物理像素比
  • 物理像素点指的是屏幕显示的最小颗，是物理真实存在的。
  • 所谓Retina是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
  • 而一个px的绝对（在开发中认为是绝对）长度能显示的物理像素点的个数，称为物理像素比，屏幕像素比。

图片失真问题

在标准的viewport设置中，使用二倍图来提高图片质量，解决在高清设备模糊问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    .box{
        /*原始图片100*100px*/
        background-size: 50px 50px;
    }
    img{
        /*原始图片100*100px*/
        width: 50px;
        height: 50px;
    }
```    
##### 移动端css问题
```text
        /* 禁用客户端软件的字号调整 */
        -webkit-text-size-adjust: 100%;
        /* 解决IOS默认滑动很卡的情况 */
        -webkit-overflow-scrolling : touch;
        /* 解决点击高亮效果 */
        -webkit-tap-highlight-color: transparent;
        /* 设置元素的尺寸计算从边框开始 */
        -webkit-box-sizing:border-box;
         /* 清除表单控件默认样式 */
        -webkit-appearance: none;

首页布局

代码见案例《jdM》

移动端touch事件
事件 说明
touchstart 当手指触碰屏幕时候触发该事件
touchmove 当手指在屏幕上滑动时候触发该事件
touchend 当手指离开屏幕时触发该事件
touchcancel 当系统停止跟踪（被迫终止）触摸时候会触发。
触摸点集合 说明
targetTouches 目标元素的所有当前触摸点集合
changedTouches 目标元素的最新更改的触摸点集合
touches 页面上的所有触摸点集合

注意：在touchend事件的时候event只会记录changedtouches

点坐标 说明
pageX/pageY 基于页面大小的坐标
clientX/clientY 基于视口大小的坐标
screenX/screenY 基于屏幕大小的坐标
京东轮播图

代码见案例《jdM》

衍生的tap事件

出现的原因：由于早期移动端页面双击可以缩放，为了检测双击操作，延长了click的响应时间，200-300ms。

第一种解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*模拟tap事件（tap在移动端库zepto.js有使用）*/
/*1. 响应的速度比click要快   150ms */
/*2. 不能滑动*/
var bindTapEvent = function (dom, callback) {
    var startTime = 0;
    var isMove = false;
    dom.addEventListener('touchstart', function () {
        startTime = Date.now();
    });
    dom.addEventListener('touchmove', function () {
        isMove = true;
    });
    dom.addEventListener('touchend', function (e) {
        if ((Date.now() - startTime) < 150 && !isMove) {
            callback && callback.call(this, e);
        }
        startTime = 0;
        isMove = false;
    });
}

第二种解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--
1 使用一个叫：fastclick.js 提供移动端click响应速度的
2 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
3 使用：
-->
<script src="../js/fastclick.min.js"></script>
<script>
    /*当页面的dom元素加载完成 如果使用jquery $(function(){});*/
    document.addEventListener('DOMContentLoaded', function() {
        /*初始化方法*/
        FastClick.attach(document.body);
    }, false);
    /*正常使用click事件就可以了*/
</script>

衍生的swipe事件

手势事件：滑动，左滑，右滑，上滑，下滑 （swipe在移动端库zepto.js有使）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
/*3. 左滑和右滑手势怎么实现*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
    /*手势的条件*/
    /*1.必须滑动过*/
    /*2.滑动的距离50px*/
    var isMove = false;
    var startX = 0;
    var distanceX = 0;
    dom.addEventListener('touchstart',function (e) {
        startX = e.touches[0].clientX;
    });
    dom.addEventListener('touchmove',function (e) {
        isMove = true;
        var moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
    });
    dom.addEventListener('touchend',function (e) {
        /*滑动结束*/
        if(isMove && Math.abs(distanceX) > 50){
            if(distanceX > 0){
                rightCallback && rightCallback.call(this,e);
            }else{
                leftCallback && leftCallback.call(this,e);
            }
        }
        /*重置参数*/
        isMove = false;
        startX = 0;
        distanceX = 0;
    });
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
    console.log('左滑手势');
},function (e) {
    console.log('右滑手势');
});

分类页布局

代码见案例《jdM》

区域滚动插件

IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化，参考文档 http://www.mamicode.com/info-detail-331827.html

《微金所项目》

什么是响应式布局
  • 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
  • 通常的做法是针对移动端单独做一套特定的版本。
  • 但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
  • 那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
为什么要学响应式
  • 现在的移动设备屏幕越来越大，种类越来越多。
  • 越来越多的设计师也采用了这种设计。
  • 在新建站的一些网站现在普遍采用的响应式开发。
响应式的原理

CSS3中的Media Query（媒体查询）
通过查询screen的宽度来指定某个宽度区间的网页布局。

划分设备 尺寸区间
超小屏幕（手机） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上
对比移动端开发
开发方式 移动web开发+PC开发 响应式开发
应用场景 一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活
开发 针对性强，开发效率高 兼容各种终端，效率低
适配 只适配 移动设备，pad上体验相对较差 可以适配各种终端
效率 代码简洁，加载快 代码相对复杂，加载慢

总结：
移动web开发和响应式开发都是现在主流的开发模式。
使用的都是流式布局，来适配不同设备。
由于终端设备的多样化，新建站的站点会优先用响应式来开发。

响应式框架bootstrap
  • 简介：
    • 作者：Twitter 公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。
    • 特点：组件简洁大方，代码规范精简，界面自定义性强。
    • 目的：提高web开发效率。
  • 文档：
  • 优点：
    • 有自己的生态圈，不断的更新迭代。
    • 提供了一套简洁、直观、强悍的组件。
    • 标准化的html+css编码规范。
    • 让开发更简单，提高了开发的效率。
    • 注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。
  • 版本:
    • 2.x.x 停止维护,兼容性好,代码不够简洁，功能不够完善。
    • 3.x.x 目前使用最多,稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。
    • 4.x.x 测试阶段,更偏响应式，移动设备。
使用bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--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, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->
    <title>title</title>
    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 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>
<!--TODO-->
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
微金所首页开发

代码见案例《微金所项目》

less安装
  1. 安装nodejs https://nodejs.org/dist/ 可选择版本(6.0)。
  2. 检查是否安装成功，使用cmd命令 node -v 查看版本即可。
  3. 基于nodejs安装less:
    • 在线安装：使用cmd命令 npm install -g less
    • 离线安装:
      a.找到C盘根目录下的用户或User文件夹打开
      b.找到当前计算机使用的用户文件夹打开
      c.找到隐藏文件夹AppData打开
      d.找到Roaming文件夹打开
      e.找到npm文件夹打开，该文件夹为基于nodejs程序目录
      f.把npm.zip文件解压到该目录
less简介

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

less编译

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

1
lessc 目标文件地址 生成文件地址

在开发过程当中如果要预览less，每次都要执行编译命令，为了方便可以使用部分编辑器中less自动编译功能。

  1. 点击文件打开菜单，选择设置选项
  2. 选择工具当中的文件监听选项
  3. 点击右上角加号按钮，选择less后弹出对话框，点击确定即可。
less基本语法

  • 变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @mainColor:#e92323;
    @className:box;
    div{
      background: @mainColor;
    }
    a:hover{
      color: @mainColor;
    }
    //变量用于字符拼接使用方法
    .@{className}{
      color: @mainColor;
    }

  • 混入(mixin)

    1
    2
    3
    4
    5
    6
    7
    .borderRadius(@width:100px){
      border-radius: @width;
      -webkit-border-radius:@width;
      -moz-border-radius:@width;
      -o-border-radius:@width;
      -ms-border-radius:@width;
    }

  • 嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .wjs_app{
      display: block;
      img{
        display: none;
      }
      /*需要连接的情况：&*/
      &:hover{
        img{
          display: block;
          position: absolute;
          left: 50%;
          margin-left:-60px;
          border: 1px solid #ccc;
          border-top: none;
          top:40px;
          z-index: 100000;
        }
      }
      > div{
        display: block;
      }
    }

  • 导入

    1
    @import "variables";

  • 运算&内置函数

api地址：http://lesscss.cn/functions/#functions-overview

1
2
3
4
5
6
7
8
9
10
11
12
/*运算*/
@num:5;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.3;
    /*内置函数*/
    border-color: darken(red,20%);
  }
}
bootstrap定制
  1. 线下定制：更改源码，重新编译。
  2. 线上定制：官方网站，定制功能。

《苏宁项目》

rem适配原理
  • rem 是相对于页面根源素html的字体大小的一个尺寸单位
  • 页面内容可以使用rem为单位，那么html的字体大小就是一个控制尺寸的开关
  • 当设备改变的时候可以根据设备的宽度和原本设计稿的尺寸比例关系设置html的字体大小
  • 这样凡是以rem为单位的内容会根据设备做等比适配
1
2
3
4
5
1.假设设计稿是750px
2.假设这个时候html字体大小为100px
3.那么在320px设备的时候  字体大小为 100/750*320
4.只要根据这个比例在不同设备设置rem基准值(html字体大小)即可
5.改变rem基准值有两种方式：媒体查询或javascript
flexible.js + rem适配方案
  • flexible.js 是手机淘宝团队做移动端适配的库
  • 我们使有它的目的只有一个根据设备设置rem基准值
1
2
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=.0">
<script src="flexible.js"></script>
media query + rem适配方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*假设的设备  320px 414px 640px */
@media (min-width: 320px) {
    html{
        font-size: 50px;
    }
}
@media (min-width: 414px) {
    html{
        font-size: 64.6875px;
    }
}
@media (min-width: 640px) {
    html{
        font-size: 100px;
    }
}
基于less的rem可维护适配方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//适配函数
.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}
在浏览器使用less开发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="index.less">
    <script src="less.min.js"></script>
    <script>
        less.watch();
    </script>
</head>
<body>
    <!--1.在浏览器端直接使用less文件预览 type="text/less" -->
    <!--2.浏览器无法直接使用less类型的文件，无法解析-->
    <!--3.转换成css,需要js插件支持-->
    <!--4.下载插件 https://github.com/less/less.js/tree/master/dist -->
    <!--5.less.js会异步加载less文件的内容，再去解析成css,然后追加到style-->
    <!--6.必须使用HTTP形式打开页面，不要以file形式打开-->
    <!--7.更改完成之后每次要刷新，可以配置less监听，自动刷新页面预览-->
    <!--8.需要js配置 less.watch() -->
    <div class="box2">test</div>
</body>
</html>
苏宁首页开发

参考代码《苏宁项目》

zeptojs的使用
  • Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
  • Zepto模块
module default description
zepto ✔ 核心模块；包含许多方法
event ✔ 通过on()& off()处理事件
ajax ✔ XMLHttpRequest 和 JSONP 实用功能
form ✔ 序列化 & 提交web表单
ie ✔ 增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect 提供 $.os和 $.browser消息
fx The animate()方法
fx_methods 以动画形式的 show, hide, toggle, 和 fade*()方法.
assets 实验性支持从DOM中移除image元素后清理iOS的内存。
data 一个全面的 data()方法, 能够在内存中存储任意对象。
deferred 提供 $.Deferredpromises API. 依赖”callbacks” 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。
callbacks 为”deferred”模块提供 $.Callbacks。
selector 实验性的支持 jQuery CSS 表达式 实用功能，比如 $(‘div:first’)和 el.is(‘:visible’)。
touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。
gesture 在触摸设备上触发 pinch 手势事件。
stack 提供 andSelf& end()链式调用方法
ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.
  • 打包Zepto常用模块
1
2
3
4
5
6
1、首先在自己的电脑上要安装Node.js和npm包管理工具；
2、从github上下载zepto.js的源文件包到本地磁盘（例如：E:\Learning\JS）；地址：https://github.com/madrobby/zepto
3、将下载的zepto压缩包解压，进入，找到make文件，打开，找到第42行的位置，添加需要的模块名称（这里增加了fx_methods 和 fx 模块），以空格做分隔；
4、运行中，cmd打开命令窗口，并进入zepto文件目录；
5、执行 npm install 命令；
6、输入npm run-script dist 命令，进行构建；
swiper插件使用

参考文档：http://www.swiper.com.cn/usage/index.html