三、Web API模块
基础部分
1. 要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路？
- [ ] 1. 流式布局：
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来
根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就
是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
1. 响应式开发：
那么 EthanMarcotte 在2010 年 5月份提出的一个概念，简而言之，就是一个网站能
够兼容多个终端。越来越多的设计师也采用了这种设计。
CSS3中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽
度区间的网页布局。
超小屏幕（移动设备） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap 来
完成一部分工作，当然也可以自己写响应式。
2. px em rem 取用选择依据？
- [ ] 1. px 像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px要换算成物理长度，需要
指定精度 DPI。
1. em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字
体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因
此并不是一个固定的值。
1. rem是 CSS3新增的一个相对单位（root em，根em），使用 rem 为元素设定字
体大小时，仍然是相对大小，但相对的只是HTML根元素。
1. 区别：IE无法调整那些使用 px作为单位的字体大小，而em 和rem可以缩放，rem
相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既
可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁
反应。目前，除了 IE8及更早版本外，所有浏览器均已支持rem。
3. Zepto和jQuery的区别？
- [ ] Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuerymobile移动端框架。
实际工作部分
1. 移动端touch事件判断滑屏手势的方向？
- [ ] 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；
当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。
思路：用touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。
具体代码如下：
var mybody = document.getElementsByTagName('body')[0];
//滑动处理
var startX, startY, moveEndX, moveEndY, X, Y;
mybody.addEventListener('touchstart', function(e) {
e.preventDefault();
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
});
mybody.addEventListener('touchmove', function(e) {
e.preventDefault();
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if ( X > 0 ) {alert(‘向右’);}
else if ( X < 0 ) {alert(‘向左’);}
else if ( Y > 0) {alert(‘向下’);}
else if ( Y < 0 ) { alert(‘向上’);}
else{alert(‘没滑动’); }
});
2. 移动端对图片优化有哪些方式，怎么实现？
- [ ] 懒加载，使用CSS Sprites合并为一张大图，首先从图片格式方面着手，webp(google官方网址)是谷歌推出的一种图片格式，优点在于同等画面质量下，体积比jpg、png少了25%以上，去掉无意义的修饰，使用矢量图替代位图。
按照HTTP协议设置合理的缓存。
详见链接 http://web.jobbole.com/81766/
3. rem布局中的尺寸是怎样计算的，实际举例说明一下？
- [ ] 其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。
网友评论