课程大纲
1、移动端viewport设定;
2、em、rem、vh/vw相对单位;
3、rem移动端适配原理;
4、移动端真机测试。
4、touch事件讲解;(touchstart, touchend, touchmove)
5、根据touch事件延伸长按、双击等移动端常见操作;
6、移动端click 300ms延迟及点透问题的解决方案(fastClick/zepto);
7、移动端开发技巧及常见问题汇总。
各种参考文档:
移动端适配原理:
https://www.jianshu.com/p/6e43f32394e3
https://blog.csdn.net/chi1130/article/details/82844489
移动端真机测试:
https://www.jianshu.com/p/95d523aeea02
https://blog.csdn.net/Zorephp/article/details/82879124
移动热点:
https://jingyan.baidu.com/article/6181c3e0b00149542ef153a0.html
http://www.zhuangjiba.com/bios/16751.html
https://blog.csdn.net/lvbey/article/details/118678750
touch事件:触摸
https://www.jianshu.com/p/418e6bdb1fac
https://www.cnblogs.com/kenshinobiy/p/10720151.html
https://www.cnblogs.com/winyh/p/6714923.html
pc上调试touch事件:
https://blog.csdn.net/beeworkshop/article/details/103108057
根据touch封装tap,taplong事件:
https://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
移动端click 300ms延迟及点透问题的解决方案:
https://blog.csdn.net/baoao1875/article/details/101642198
https://blog.csdn.net/panying0903/article/details/45970315
https://www.cnblogs.com/bo-haier/p/5650323.html
fastclick下载:
https://www.bootcdn.cn/fastclick/
移动端开发技巧及常见问题汇总:
https://blog.csdn.net/donyfeng66/article/details/71216462
https://www.cnblogs.com/wonyun/p/10085144.html
https://www.jianshu.com/p/3a262758abcf
移动端弹窗示例:
http://www.jq22.com/demo/jquerymessage201902150049/
滑动验证
https://www.17sucai.com/preview/776331/2017-12-22/ft-slider/index.html
知识点总结
1.开发过程中常用的CSS单位?
px, %, em, rem, vh, vw
pt, in, cm, mm了解
2.rem移动端适配原理?
通过给html标签设置字体,让文档中的其他元素的字体或者宽高参照html字体自动适配。
有两种适配方案:1. 网易13.333333vw 2. js方案
3.移动端真机测试?
a. 操作系统:打开“移动热点”
b. 如果移动热点,手机连接不上,可以“以太网”-》“属性”-》共享 勾选相应的选项。
c. 手机浏览器打开本地网址:
http://192.168.104.94:5500/index1.html