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

作者:日期:2017-12-10 15:53:36 点击:570

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

响应式布局开发基础

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好

Alt text

微信是最为经典的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的宽度和设备宽度保持一致

Alt text

[没有加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);

Alt text

[加入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!

上一篇: HTML5基础知识及兼容处理

下一篇: 返回列表