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-xxpx;,在{}中写入满足判断条件时的页面元素布局样式.
4.3 响应式布局框架
响应式布局的出现可以使一个页面同时适配不同的设备.但是实现功能的同时使得开发人员需要在页面中写多份页面样式来满足要求.这样会出现一些不必要的样式重复.所以也就促就了响应式布局框架的出现.
4.3.1 bootstrap框架
我们可以通过查看框架中的CSS样式表,来选择适用于我们项目的布局样式.