移动端响应式布局开发常用知识

响应式布局开发基础

1、什么是响应式布局开发?
把我们开发完成的产品，能够让其适配不同的设备屏幕：PC端（电脑）、PAD、PHONE（手机端）

2、当别人和你聊H5，他们想要聊的是什么？
现在H5已经成为移动端开发（响应式布局）的标准代名词

3、移动端发展史
智能生活（互联网+）离不开各种APP（应用），这些应用离不开一代又一代的IT工程师

很久以前，APP开发和H5没什么太大的关系，都是由专业的APP开发团队开发的
安卓系统：JAVA（java-native）
IOS系统：C（object-c / swift）
我们把使用上述语言开发的APP称之为 native app（原生APP）
1、本地开发，打包成安装包，上传到应用商店（App Store 是有审核期的[7天]），用户从应用商店下载安装相关的APP：把当前APP的源文件（原代码安装在手机上了，类似于在电脑上安装WS）
2、native app可以操作手机内部的软件或者硬件（例如：通讯录、摄像头、相册、重力感应器等等），因为它是直接运行在操作系统中的程序
3、做一些操作和交互，性能是比较不错的

4、手机操作系统不一样，使用的技术也不一样，所以需要两个不同的开发团队，开发不同版本的APP（问题：有的版本升级快，有的版本升级慢）

目前我们开发一款APP需要H5的介入：在native-app中嵌入H5页面(web-app)，我们这种模式称之为Hybrid混合APP开发
由H5开发的web-app的特点：
1、其实就是个HTML页面，需要基于浏览器运行（PC或者移动端浏览器再或者V8内核的工具也可以），如果想要操作手机内部的软件或者硬件，需要浏览器的支持
2、相比于native-app来说，性能不好
3、所有的请求访问都必须基于连网的状态（除了有些是native-app把h5特殊处理了），虽然h5中支持manifest离线缓存，但是这个技术不咋好用
原因：native-app不需要，是因为所有的代码文件都在手机上，一些需要连网访问的，native-app都可以做离线缓存（缓存视频）；H5页面部署到了自己的服务器上，源文件都在服务器上呢，用户想要看页面，必须从服务器上重新的拉取代码才可以；

4、更新比较及时：H5只需要把服务器上的文件更新，用户每次访问看到的都是最新版本，这个比native-app好

微信是最为经典的Hybrid混合开发模式，它支持我们的H5页面在微信这个native-app中运行，而且还可以调取微信提供的一些方法实现相关的操作（例如：微信的二次分享）
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

常见的项目类型

1、PC端和移动端公用一套项目（同一个地址），我们也要保持良好的展示性，例如：猎豹浏览器、华为官网等简单的展示网站

2、PC端和移动端用的是不同的项目，例如：京东、淘宝等…
PC端固定布局即可
移动端需要考虑响应式开发
1）放在浏览器中运行
2）放在第三方平台中运行（微信）
3）放在自己公司的native-app中运行
…

手机常用尺寸
[苹果]
iphone 5s及以前：320px
iphone4 : 320*480
iphone5 : 320*568

iphone6：375px * 667
iphone6plus：414px

[安卓]
320、360、480、540、640 …

做H5页面开发之前，需要先从设计师手里索要UI设计图（PSD格式的或者sketch设计稿）
设计师提供的专门做移动端项目的设计稿尺寸
640*960
640*1136
750*1334
…

设备像素密度比

如何做响应式布局开发?

只要当前页面需要在移动端访问，必然加

<!--meta:vp [tab]-->
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

不加VP，不管手机设备有多宽，我们HTML页面的宽度都是980（如果在320的手机上观看HTML页面，为了保证保证把页面呈现全，需要HTML缩小大概三倍左右，所有内容都变小了），为了不让页面缩放，我们需要保证手机的宽度和HTML的宽度一致
width=device-width：让HTML的宽度和设备宽度保持一致

[没有加VP的效果：全体缩小了，需要手动缩放看]

//=>JS中动态设置vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);

[加入vp后就不在变小了]

REM响应式布局开发

和px像素一样，它是一个CSS样式单位
PX：固定单位
REM：相对单位（相对于页面根元素[HTML]字体大小设定的单位）

真实项目中如何利用REM的这个特性实现响应式呢？
1、严格按照设计稿中提供的尺寸进行样式编写（不管是宽高、还是MARGIN、还是字体等），例如：设计稿是750*1336的，设计稿中有一个300*150的图片，我们布局的时候依然按照300*150布局…

2、我们在编写样式的时候，不要使用PX单位，所有的单位都统一换算为REM（此时我们需要让HTML的FONT-SIZE=100PX）

3、上述完成后，在750的手机上是没有任何问题的，但是在375的手机上肯定存在问题了（页面太大了），此时我们需要让页面中的所有样式，都整体缩小，才能达到响应式适配的目的
此时只需要把HTML的字体大小修改，那么之前所有以REM为单位的样式自动会跟着重新计算：
750设计稿：1REM=100PX
375的手机：375/750*100 就是最新HTML的字体大小，也是最新REM和PX的换算比例
当前设备的宽度/设计稿宽度*100=“当前手机下REM和PX的换算比例[HTML的字体大小]”

REM等比缩放响应式布局：目前市场上，如果单独做移动端项目（项目只在移动端访问，PC端有单独的项目），我们选择响应式适配的最佳方案就是REM布局（当然细节处理可能会用到flex或者@media）

移动端常用类库Zepto

一个小型的，专门针对于移动端开发的JS类库，它的开发原理以及使用方式都非常接近于JQ，所以很多人也把它称之为小型的JQ

ZEPTO VS JQUERY

1、zepto不支持IE6~8，有一些方法连IE的高版本也不支持，是专门为安卓和IOS系统所在的移动端准备的；JQ的第一代版本兼容所有的浏览器(最常用的版本)，第二代和第三代不在兼容IE低版本浏览器；

2、zepto只实现了部分JQ中常用的方法，有一些方法在zepto中无法使用，例如：JQ支持animate、hide、show、slideDown、slideUp…这些动画，但是zepto中只有animate，其它快捷动画不支持

=> zepto类库的体积比jquery小很多，它属于轻量级的JS类库，更适合移动端的使用

3、zepto中提供了移动端专用的事件操作方法，而jquery中没有；
tap：点击
singleTap：单击
doubleTap：双击
longTap：长按
swipe：滑动
swipeUp/Down/Left/Right：四个方向滑动
pinchIn/Out：放大缩小
…
$(‘selector’).tap(function(e){
//=>实现点击要做什么
//=>e：手指事件对象 this:当前操作的元素
})

4、zepto中的animate支持transform变形，jquery中是不支持的

$('selector').animate({
    top:100,
    rotate:'360deg'
},1000,'linear',function(){
    //=>回调函数，动画完成后触发执行
});

https://github.com/madrobby/zepto

HTML5中的audio

音频播放标签，通过它可以播放音频文件（支持格式：mp3、ogg、wav）

[使用]
<audio src='xxx.mp3'></audio>

<audio>
<source src='xxx.mp3' type='audio/mpeg'>
<source src='xxx.ogg' type='audio/ogg'>
<source src='xxx.wav' type='audio/wav'>
您的浏览器不支持AUDIO，请升级浏览器
</audio>

AUDIO中的一些内置属性

controls：是否使用内置的播放器播放，默认是不显示浏览器自带播放器的，加上这个属性显示

autoplay：自动播放（这个属性一般不用，我们一般都是在JS中控制播放和暂停）

preload：设置当前音频文件预先加载的模式，默认值auto，代表开始加载页面的时候就把音频文件进行加载，metadata代表开始加载页面我们只加载一些最基础的信息，主体音频信息需要播放后才开始加载，none开始什么都不加载，都是等到播放后在开始加载（最常用）

loop：播放完成后循环播放

Swiper插件的使用

http://www.swiper.com.cn/
swiper其实一个UI组件（也可以理解为JS插件），目的就是解决移动端滑屏操作的，例如：轮播图、屏幕滑动切换的场景应用等

如何使用swiper？
so easy！just so so！