Download presentation
Presentation is loading. Please wait.
1
18337149582 / fengshunlei@51xueweb.cn
第7讲：移动开发 冯顺磊 /
2
本讲主要内容 移动Web开发包含哪些内容？ 如何做移动Web开发？ 一个移动网页的案例
3
1.移动Web开发包含哪些内容？ 可以按照表现方式的不同将移动Web分为移动网页和移动APP两种。
4
1.移动Web开发包含哪些内容？ 移动网页：在移动端表现良好的网页。 移动端的网页开发与PC端的网页开发有着什么样的区别？
5
1.移动Web开发包含哪些内容？ 移动端的浏览器兼容性问题少之又少。 移动端有着各种各样的手势操作。 移动端存在着不同手机的适配问题。
6
1.移动Web开发包含哪些内容？ 移动APP 先了解下三种移动端的APP Native App原生app手机应用程序
使用原生的语言开发的手机应用，Android系统用的是java或者是新的Kotlin，iOS系统用的是object-C或者是新的Swift。 Hybrid App 混合型app手机应用程序 也有另外的一个名字叫做【套壳开发】，混合使用原生的程序和html5页面开发的手机应用。 Web App 基于Web的app手机应用程序 完全使用html5页面加前端JS框架开发的手机应用。
7
1.移动Web开发包含哪些内容？ Web APP apple-mobile-web-app-capable
8
2.如何做移动Web开发？ layout viewport visual viewport ideal viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 在这个里边有三个层次的viewport layout viewport visual viewport ideal viewport <meta name=“viewport”>设置的是layout viewport
9
2.如何做移动Web开发？ Viewport 的设置？ 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。
10
2.如何做移动Web开发 理解px、em、rem三种前端常用尺寸 px：将显示器分成非常细小的方格，每个方格就是一像素。
rem：继承根元素的字体大小，即为HTML的字体大小，为CSS3新增的属性。
11
2.如何做移动Web开发 理解@media{} 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
12
2.如何做移动Web开发 移动前端的布局 基于rem实现的布局
13
2.如何做移动Web开发 移动前端的布局
14
2.如何做移动Web开发 手势
15
2.如何做移动Web开发 移动端的手势基于JS的Touch事件实现 TouchEvent 代表当触摸行为在平面上变化的时候发生的事件.
touchstart : 触摸开始（手指放在触摸屏上） touchmove : 拖动（手指在触摸屏上移动） touchend : 触摸结束（手指从触摸屏上移开） touchenter ：移动的手指进入一个dom元素。 Touch 代表用户手指与触摸平面间的一个接触点. TouchList 代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口. DocumentTouch 包含了一些创建 Touch对象与TouchList对象的便捷方法.
16
2.如何做移动Web开发 Hammer.js 官网：http://hammerjs.github.io/. Swiper
中文网：
17
3.一个移动网页的案例
18
Thanks.
Similar presentations
