移动端面试题【一】

公司人慢慢都走了，所以我也托同事内推一家公司，很久很久没有面试，很少复习这些面试题，感觉自己属于会写不会说的人，好好准备一下面试，争取通过~加油吧

移动端面试题

1、能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？

流式布局：也就是百分比布局(viewport)， 使用非固定像素来定义网页内容，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发： 就是一个网站能够兼容多个终端。CSS3中的Media Query（媒介查询)通过查询screen的宽度来指定某个宽度区间的网页布局。 由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作。
响应式开发和移动web开发的区别
开发方式 移动web开发+PC开发 响应式开发
应用场景 一般在已经有PC段的网站，开发移动站的时候，只需单独开发移动端 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活
开发 针对性强，开发效率高 兼容各种终端，效率低
适配 只是陪移动设备，pad上体验相对较差 可以适配各种终端
效率 代码简洁，加载快 代码相对复杂，加载慢

2、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

3、Bootstrap中最多可以分多少列？lg、md、sm、xs这几个屏幕宽度的界限是多少？

答：12列 .col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕桌面显示器 (≥992px) .col-lg- 大屏幕大桌面显示器 (≥1200px)

4、移动端事件与pc端有什么区别？

移动端新增了触摸事件。没有鼠标事件和hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。/5、

5、zepto与jquery有什么区别？

Zepto中没有为原型定义extend方法而jQuery有。
Zepto新添了touch事件，zepto是模块化的库
Zepto是不支持IE浏览器的

6、怎么适配各种机型？

设置viewport进行缩放、响应式做法、流式布局、rem能等比例适配所有屏幕