妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 19531|回复: 5

妙味2014年移动端系列视频——移动端的那点事儿!

 关闭 [复制链接]
motao 发表于 2014-10-11 21:08:14 | 显示全部楼层 |阅读模式

10.1假期过去了,快乐的时间总是跑的快,但是不要郁闷,因为妙味vip群的福利又来了!!!
妙味的准则就是:让你们真心觉得这100大洋花的巨爽,爽到你们自己都不好意思~
从今天开始,连续两个月,我们打算连续发布移动端视频开发,和你聊聊移动端开发的那些事儿~

《妙味2014年移动端系列视频——移动端的那点事儿!

课程内容:本系列视频主要目的『撕掉web动端开发的神秘面纱,帮助已经入行的前端工程师更快上手web移动端开发

常见移动端项目:
1)UEhtml手机版官网

UEhtml.gif


2)音悦台手机版官网

    音乐网.gif
   

3)玛莎拉蒂手机官网

    车.gif
   

4)雪佛兰手机版官网

    雪福来.gif

更多精彩移动端项目,欢迎提供到 QQ:1056104999 提交成功的项目,我们可以列在移动课程中讲解哦~~

说明:
    1)本视频主要针对妙味VIP群成员,相关课程视频会不定期在VIP群中更新
    2)每节课配备课后练习,辅助大家更好掌握该课程知识点;
    3)全程均有详尽的课程资料、demo演示代码在本帖中供大家下载;
    4)每月会不定期安排YY远程,帮VIP群成员详细讲解课后练习;

>>加入妙味官方VIP会员


详细课程大纲,请往下看




回复

使用道具 举报

 楼主| motao 发表于 2014-10-11 21:14:17 | 显示全部楼层
第一课:Emulation 模拟器

一:Device 设备设置
       1. model 模型选择
       2. resolution 分辨率设置
       3. Device pixel ratio 像素比设置
       4. *Emulate mobile 模拟移动端特性
       5. *Enable text autosizing 自动缩放字体
       6. *Shrink to fit 缩放以适应屏幕
二:Media 媒体查询
三:Network 浏览器信息
四:Sensors 传感器
       1. Emulate touch screen 模拟移动端触摸事件
                 --touch-events
       2. Device Geolocation Overrides 重置地理信息
       3. Accelerometer 模拟陀螺仪
                 α 围绕这Z轴的旋转
                 β 围绕这X轴的旋转
                 γ 围绕这Y轴的旋转



>>本期视频下载
- 密码见VIP会员邮件 -

下载问题咨询QQ:2264453929




回复 支持 9 反对 0

使用道具 举报

 楼主| motao 发表于 2014-10-21 18:44:14 | 显示全部楼层
第二课:viewport
<meta name="viewport" content="" />
           1.width [pixel_value | device-width]
        2.user-scalable 是否允许缩放 (no||yes)
        3.initial-scale 初始比例
        4.minimum-scale 允许缩放的最小比例
        5.maximum-scale 允许缩放的最大比例
        6.target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]


>>本期视频下载
- 密码见VIP会员邮件 -

下载问题咨询QQ:2264453929
回复 支持 6 反对 0

使用道具 举报

 楼主| motao 发表于 2014-11-5 16:05:35 | 显示全部楼层
第四课:移动端相册删除效果

Untitled.gif

布局
    1.rem
    2.linear-gradient
    3.calc
    4.background-size
    5.box-shadow
JS
    1.元素生成
    2.布局转换
    3.元素删除--排序
    4.tansition的问题
3D   
    1.3D折纸的布局
    2.加入3D布局
练习
完善本效果


>>本期视频下载
- 密码见VIP会员邮件 -

下载问题咨询QQ:2264453929










回复 支持 3 反对 0

使用道具 举报

 楼主| motao 发表于 2014-10-30 19:54:10 | 显示全部楼层
第三课:媒体查询
引入方式
    1.
  1. <link rel="stylesheet" type="text/css" href="index.css" media="all and (min-width: 600px)">
复制代码
  2.
  1. @import url("css/reset.css") all and (min-width: 600px) ;
复制代码
    3.
  1. @media all and (min-width: 600px)
  2. {
  3.     .box
  4.     {
  5.         width:100px;
  6.     }
  7. }
复制代码

媒体类型
    1.all 所有媒体
    2.braille 盲文触觉设备
    3.embossed 盲文打印机
    4.print 手持设备
    5.projection 打印预览
    6.screen 彩屏设备
    7.speech '听觉'类似的媒体类型
    8.tty 不适用像素的设备
    9.tv  电视

媒体特性
    1.(max-width:599px)
    2.(min-width:600px)
    3.(orientation:portrait) 竖屏
    4.(orientation:landscape)        横屏
    5.(-webkit-min-device-pixel-ratio: 2) 像素比



关键字
    1.and
    2.not      not关键字是用来排除某种制定的媒体类型
    3.only     only用来定某种特定的媒体类型
         -很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备



>>本期视频下载
- 密码见VIP会员邮件 -

下载问题咨询QQ:2264453929


回复 支持 3 反对 0

使用道具 举报

 楼主| motao 发表于 2014-12-19 10:58:40 | 显示全部楼层
第五课:滑屏图片切换
一:事件
     1.touchstart  手指摁上
     2.touchmove  手指移动
     3.touchend  手指移开
二:touchEvent
     1.touches  当前位于屏幕上的所有手指的一个列表
     2.targetTouches  位于当前DOM元素上的手指的一个列表
     3.changedTouches   涉及当前事件的手指的一个列表
三:拖拽   
    1.阻止默认事件,防止在某些手机上拖拽无效
  1. document.ontouchmove=function(e)
  2. {
  3.      e.preventDefault();
  4. };
复制代码
    2.去掉a链接的黑影 -webkit-tap-highlight-color:rgba(255,0,0,0);
   3.防止误触




回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-2-19 12:24 , Processed in 0.163111 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表