移动端面试题【一】

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

移动端面试题

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能等比例适配所有屏幕

原文地址:https://www.cnblogs.com/guanhuohuo/p/12526176.html