移动web

1. 移动web与电脑端web
1.1 二者布局的区别
1.1.1 电脑端web
在作电脑端页面布局时,给页面设置的常为固定的长和宽,为的是页面不会由于不一样分辨率和不一样浏览器发生页面布局的错位.
如今咱们也能经过给父盒子设置display:flex;来实现弹性布局,能够经过只对父盒子设置宽高,实现盒子内部的布局不会由于浏览器大小而发生布局改变.
1.1.2 移动web
移动web的开发就和电脑端有着明显的区别,缘由移动端的可视区域大小明显比电脑端小,而且可视区域的大小有许多种类,没法固定一种大小来设置页面,会使得其余移动端的客户满意度极差.全部咱们在移动web开发时,须要考虑视口大小的不一样,须要使页面自适应不一样大小的视口.
这时咱们会想到使用弹性布局来实现,弹性布局是能够极好的知足自适应视口的大小,使得页面布局不发生错误.可是因为在如今移动端页面软件中,占比最多的UC并不支持弹性布局,因此咱们只能将其的使用推荐推后.
而如今比较多的是使用百分百的布局方式,在给页面设置宽高时,使用百分数来设置,使总体的宽高根据移动端视口大小来改变页面的显示宽高.
如今移动端web显示一般为宽度固定,高度根据内容增长.因此在设置移动端web布局时,会将页面的宽度根据视口的宽度进行固定,而且能够设置最大及最小宽度,为得是若是自适应太小或者过大的宽度时使页面布局错乱或者不美观.
1.2 共同点
二者在布局时除了移动端须要考虑移动设备的视口不一样之外,其余的html及css设置大体相同,具体的项目进行具体的布局调试.
2. 移动端的事件
2.1 电脑端的触发事件
在电脑端写JS代码时,有如下经常使用的事件类型,如点击,双击等,这些事件类型中有许多都是基于鼠标点击来触发的.
2.2 移动端的触发事件
在移动端web中点击事件就至关于咱们用手指点击了一下页面中的一个元素,而在移动端页面中有一个移动端特有的事件类型,那就是touch事件,它分红三个事件:
touchstart:手指触摸开始时触发
touchmove:手指触摸并在页面上滑动时触发
touchend:手指离开页面时触发
这三个事件中若是不发生touchmove事件就相对于click事件,而且在一些浏览器中click事件的事件响应时间相对touch事件的事件响应时间明显要长,也就会形成使用这些浏览器的用户会明显感受到页面的延迟及卡顿,使得客户满意度较差.
这时咱们能够结合touch的三个事件来实现click事件的功能,固然相对click来讲须要写的代码也会相对多一些.
在这个实现的过程最主要的是判断手指触摸屏幕和手指离开屏幕过程当中是否发生了touchmove事件,若是没有发生能够认为是点击,并触发点击的事件处理函数,若是发生了则认为不是点击,不触发点击事件的处理函数.若是须要考虑是不是长按,则须要计算开始触摸和结束触摸之间的时间差.
var startTime = 0;//定义开始触发时的时间
var maxTime = 200;//定义判断最大的间隔时间
var isMove = false;//定义标示,判断是否发生移动
dom.addEventListener('touchstart', function(e) {
 startTime = Date.now(); // 记录开始触发的时间初始值
})
dom.addEventListener('touchmove', function(e) {
 isMove = true;//若是发生移动,将标示赋值true
})
dom.addEventListener('touchend', function(e) {
 var touchTime = Date.now() - startTime;//计算并获取开始和结束的差值时间
 if (touchTime <= maxTime && isMove == false) {
  callback(e);//判断是否在最大间隔时间内,而且判断是否触发了移动
 }
 isMove = false;// 重置标示
})
3. 移动端的'jQ'
在作电脑端页面时,咱们会使用jQuery,它是基于JS的一个JS数据库,封装了许多方法.而在移动端web中也有适用于移动端页面开发的'jQ',那就是zepto,它是一个基于jQ的一个数据库,使用方法与jQ一致,它多出来的是适用于移动端特有的方法.
在调用zepto进行开发的时候须要注意的是,它不一样于jQ一个文件包含了全部的方法功能,zepto中不一样的功能封装在不一样的文件中,在开发时须要在调用zepto主文件的同时还须要调用一些实现具体功能的子文件.
4. 响应式布局
4.1 响应式布局的概念
响应式布局是将电脑端web布局和移动端web布局相结合的布局方式.实现的功能是编写一份页面代码,使得页面有效的适配PC设备,移动设备等多种设备.
一般一个网站的开发须要考虑适配不一样设备,不一样系统以及不一样分辨率,这样会使得开发过程须要不一样类型的开发人员进行适配对应部分的开发.而响应式布局的出现使得一个页面开发只须要一个开发团队就能完成,而且能够知足适配多种设备的要求.
4.2 响应式布局的原理
响应式布局的基础是经过媒体查询功能来实现的.经过在媒体查询语句中设置不一样的判断要求及知足判断要求时页面的样式,来改变页面在不一样设备中显示的布局样式.
媒体查询的语法:
@media screen  and (){}:()中写入判断条件如min-width:xxpx;,在{}中写入知足判断条件时的页面元素布局样式.
4.3 响应式布局框架
响应式布局的出现可使一个页面同时适配不一样的设备.可是实现功能的同时使得开发人员须要在页面中写多份页面样式来知足要求.这样会出现一些没必要要的样式重复.因此也就促就了响应式布局框架的出现.
4.3.1 bootstrap框架
咱们能够经过查看框架中的CSS样式表,来选择适用于咱们项目的布局样式.