本次课程执行的基本思路 (1)移动Web开发包含娜些内容 ①移动网页开发 ②移动APP开发 三种移动端APP的分类 Native App原生app手机应用程序 使用原生的语言开发的手机应用, Android系统用的是java,ios系统用的是 object-C Hy brid App混合型app手机应用程序 混合使用原生的程序和htm15页面开发的手机应用 Web app基于Web的app手机应用程序 完全使用hm15页面加前端js框架开发的手机应用 (2)如何做移动Web开发 ①貍解vi ②理解px、em、rem三种前端常用尺寸 ③移动前端的布局 ④手势 (3)看一个移动网页的案例 正文: 1、移动Web开发包含嘟些内容? 首先,了解一下移动Web,移动Web可以按照其表现方式的不同分为移动网页和 移动APP。移动网页比较简单,类似于腾讯新闻网、凤凰新闻网,做的是移动端网站 的适配。移动APP则是类似为手机淘宝官网、手机小米官网等有着APP使用体验的网 (1)移动网页开发 移动网页开发就是要做在移动端表现良好的网页,那么怎么样才能做到移动端表 现良好?移动端的Web开发与PC端的Web开发又有着什么样的区别? ①移动端的兼容性问题会少很多,移动端的浏览器基本上都是 webkit内核,对 HTML5、CSS3等的支持更好。 ②移动端有着各种各样的手势操作,像左滑、右滑等这些手势如何识别,如何进 行操作
本次课程执行的基本思路： （1）移动 Web 开发包含哪些内容 ①移动网页开发 ②移动 APP 开发 三种移动端 APP 的分类 Native App 原生 app 手机应用程序 使用原生的语言开发的手机应用，Android 系统用的是 java，ios 系统用的是 object-C Hybrid App 混合型 app 手机应用程序 混合使用原生的程序和 html5 页面开发的手机应用 Web App 基于 Web 的 app 手机应用程序 完全使用 html5 页面加前端 js 框架开发的手机应用 （2）如何做移动 Web 开发 ①理解 viewport ②理解 px、em、rem 三种前端常用尺寸 ③移动前端的布局 ④手势 （3）看一个移动网页的案例 正文： 1、移动 Web 开发包含哪些内容？ 首先，了解一下移动 Web，移动 Web 可以按照其表现方式的不同分为移动网页和 移动 APP。移动网页比较简单，类似于腾讯新闻网、凤凰新闻网，做的是移动端网站 的适配。移动 APP 则是类似为手机淘宝官网、手机小米官网等有着 APP 使用体验的网 站。 （1）移动网页开发 移动网页开发就是要做在移动端表现良好的网页，那么怎么样才能做到移动端表 现良好？移动端的 Web 开发与 PC 端的 Web 开发又有着什么样的区别？ ①移动端的兼容性问题会少很多，移动端的浏览器基本上都是 webkit 内核，对 HTML5、CSS3 等的支持更好。 ②移动端有着各种各样的手势操作，像左滑、右滑等这些手势如何识别，如何进 行操作
③移动端有着多种手机适配的问题。 (2)移动APP开发 这里需要了解一下三种不同类型的移动端APP: Native App原生app手机应用程序 使用原生的语言开发的手机应用, Android系统用的是java或者是新的 Kotlin, i0S系统用的是 object-C或者是新的 Swift Hybrid App混合型app手机应用程序 也有另外的一个名字叫做【套壳开发】,混合使用原生的程序和htm15页面开发 的手机应用。 Web app基于Web的app手机应用程序 完全使用hm15页面加前端JS框架开发的手机应用。 2、如何做移动Web开发 在这里需要了解几个概念 (1)解 viewport 参考链接: http://www.cnblogs.com/2050/p/3877280.html ①什么是 viewport 手机浏览器是把页面放在一个虚拟的“窗口”( vIewport)中,通常这个虚拟的 “窗口”( vIewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会 破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的 不同部分 ② viewport设置 个常用的针对移动网页优化过的页面的 vIewport meta标签大致如下 Meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=l> width:控制 vIewport的大小,可以指定的一个值,如果600,或者特殊的值, 如 device- width为设备的宽度(单位为缩放为100%时的CSS的像素)。 height:和 width相对应,指定高度。 initial- scale:初始缩放比例,也即是当页面第一次10ad的时候缩放比例 max mum- scale:允许用户缩放到的最大比例。 minimum- scale:允许用户缩放到的最小比例 user- scalable:用户是否可以手动缩放 (2)理解px、em、rem三种前端常用尺寸
③移动端有着多种手机适配的问题。 （2）移动 APP 开发 这里需要了解一下三种不同类型的移动端 APP： Native App 原生 app 手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java或者是新的Kotlin， iOS 系统用的是 object-C 或者是新的 Swift。 Hybrid App 混合型 app 手机应用程序 也有另外的一个名字叫做【套壳开发】，混合使用原生的程序和 html5 页面开发 的手机应用。 Web App 基于 Web 的 app 手机应用程序 完全使用 html5 页面加前端 JS 框架开发的手机应用。 2、如何做移动 Web 开发 在这里需要了解几个概念。 （1）理解 viewport 参考链接： http://www.cnblogs.com/2050/p/3877280.html ①什么是 viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的 “窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会 破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的 不同部分。 ②viewport 设置 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值， 如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。 （2）理解 px、em、rem 三种前端常用尺寸
参考链接 http://tgideas.ag.com/webplat/info/newsversion3/804/7104/7106/m5723 201509/376281 shtml PX:将显示器分成非常细小的方格,每个方格就是一像素。 继承父级元素的字体大小 继承根元素的字体大小,即为HTML的字体大小,为CSS3新增的属性。 基于REM的移动Web布局 (3)移动前端的布局 参考网站: https://m.mi coIm vIewport设置 font-size设置 (4)手势 移动端的手势基于JS的 Touch事件实现。 &:https://www.cnblogs.com/fengfan/p/4506555.html 四个接口 TouchEvent 代表当触摸行为在平面上变化的时候发生的事件 Touch 代表用户手指与触摸平面间的一个接触点 Touchlist 代表一系列的 Touch;一般在用户多个手指同时接触触控平面时使用这个接口 Document Touch 包含了一些创建 Touch对象与 Touchlist对象的便捷方法 TouchEvent接口可以响应基本触摸事件(如单个手指点击),它包含了一些具体 的事件。 touchleave:移动的手指离开一个dom元素 touchcancel,是在拖动中断时候触发
参考链接： http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/ 201509/376281.shtml PX：将显示器分成非常细小的方格，每个方格就是一像素。 EM：继承父级元素的字体大小 REM：继承根元素的字体大小，即为 HTML 的字体大小，为 CSS3 新增的属性。 基于 REM 的移动 Web 布局 （3）移动前端的布局 参考网站： https://m.mi.com/ viewport 设置 font-size 设置 （4）手势 移动端的手势基于 JS 的 Touch 事件实现。 参考：https://www.cnblogs.com/fengfan/p/4506555.html 四个接口： TouchEvent 代表当触摸行为在平面上变化的时候发生的事件. Touch 代表用户手指与触摸平面间的一个接触点. TouchList 代表一系列的 Touch; 一般在用户多个手指同时接触触控平面时使用这个接口. DocumentTouch 包含了一些创建 Touch 对象与 TouchList 对象的便捷方法. TouchEvent 接口可以响应基本触摸事件（如单个手指点击），它包含了一些具体 的事件。 touchleave ：移动的手指离开一个 dom 元素。 touchcancel，是在拖动中断时候触发
