PC前端到移动设备前端网页的制作

1、前前端端PC前端到移动设备前端的转变前端到移动设备前端的转变一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。viewport2of25viewportDemo3of25 HelloHelloHelloBeforAfter一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。viewport参数详解4of25属性释义可选值height页面高度pixel_value（指定像素） | device-height（使用设备尺寸）width

2、页面宽度pixel_value | device-width （使用设备尺寸）initial-scale初始缩放比例float_valueminimum-scale最小缩放比例float_valuemaximum-scale最大缩放比例float_valueuser-scalable是否准许用户改变页面的缩放比例yes | notarget-densitydpi每英寸像素点的数量dpi_value（指定具体值） | device-dpi（使用设备默认） | high-dpi（高密度，低像素设备会缩小） | medium-dpi（中，默认） | low-dpi（低）一旦决定好职业，必须全心投入工

3、作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。Event5of25一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。EventTouch6of25事件生命周期：1.touchstart ：手指放在一个DOM元素上2.touchmove ：手指拖曳一个DOM元素3.touchend ：手指从一个DOM元素上移开4.touchcancel ：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。关键属性：1.touches ：当前位于屏幕上

4、的所有手指（Touch）的列表。2.targetTouches ：位于当前DOM元素上的手指的列表。3.changedTouches ：涉及当前事件的手指的列表。这些属性中的手指对象（TouchTouch）由如下属性组成：1.identifier ：一个数值，唯一标识触摸会话（touch session）中的当前手指。2.target ：DOM元素，是动作所针对的目标。3.clientX / clientY ：手指在窗口中的坐标。4.pageX / pageY ：手指在页面中的坐标。5.screenX / screenY ：手指在屏幕中的坐标。一旦决定好职业，必须全心投入工作之中，必须爱自己的

5、工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。EventGesture7of25事件生命周期：1.gesturestart ：当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。2.gesturechange ：当触摸屏幕的任何一个手指的位置发生变化时触发。3.gestureend ：当任何一个手指从屏幕上面移开时触发。关键属性：1.rotation ：表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。2.scale ：表示两个手指间距的变化情况（例如向内收缩会缩短距离）;这个值从1开始，并随距离拉大而增长，随距离缩减而

6、减小。只有两个手指都触摸到事件的接收容器时才会触发手势事件。一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。Event优先级8of25touchendgestureendclickmouseupmousedownmousemovegesturechangemouseovertouchstartgesturestart当一个DOM绑定了多种事件时，各事件会以“冒泡”的方式按照优先级逐一执行各事件。触摸结束手势结束鼠标单击鼠标弹起鼠标按下鼠标移动手势移动鼠标over触摸开始手势开始一旦决定好职业，必须全心投入工作

7、之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。Event插件封装9of25一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。屏幕尺寸10of25一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。屏幕尺寸现状11of25AndroidAndroid主流机型分辨率（480 480 800 800）：1.480 x8002.480 x8543.540 x9604.720 x128

8、05.800 x1280iOSiOS主流机型分辨率（640640）：iPhone4 / 4s ：640 960iPhone5 / 5s ：640 1136PC上有各种分辨率不同的显示器，我们通常以1024 768作为开发标准，但是手机上没有这种标准。一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。屏幕尺寸解决方案12of25各互联网企业使用的页面宽度：1.【淘宝】首页：320px / 内页：100%2.【网易】：100%3.【腾讯】：100% / 但块元素（不换行的对象）的最大宽度在320以内4.【中企动力】

9、：640px结论：1.整体页面宽度：100%（万金油）2.图片根据屏幕尺寸响应缩放。3.不换行的文本最大宽度不超过320px4.响应式一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式13of25响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。14of25medi

10、a type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。响应式media type一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式media type15of25meaid typemeaid type的几种使用方法：1：linklink href=style.css media=screen print .2：?xml-stylesheet?xml-stylesheet media=print href=style.

11、css.3：import url(style.css) handheld;4： import url(style.css);5：media tvselectorrules一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式media type16of25类型释义all所有设备braille盲文embossed盲文打印handheld手持设备print文档打印或打印预览模式projection项目演示，比如幻灯screen彩色电脑屏幕speech演讲tty固定字母间距的网格的媒体，比如电传打字机tv电视一旦决

12、定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。17of25media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。响应式media query一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式media type18of25meaid typemeaid type的浏览器支持：IE5.5/6/7不支持在import中使用媒体类型Safa

13、ri/firefox只支持all,screen,print三种类型(包括iphone)Opera 完全支持Opera mini 支持handheld，未指定则使用screenWindows Mobile系统中的IE支持handheld，其它支持不明一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式media query19of25meaid querymeaid query使用示例：/* for 240 px width screen */media only screen and (max-device

14、-width:240px) selectorselector /* for 360px width screen */media only screen and (min-device-width:241px) and (max-device-width:360px) selectorselector /* for 480 px width screen */media only screen (min-device-width:361px)and (max-device-width:480px) selectorselector 一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不

15、要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式Request a Demo20of25你真的确定你明白这玩意是用来干嘛的了吗？来，给大家伙举个栗子一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式Show The DemoDemo传送门Demo代码响应式rem22of25rem 是指根元素（root element，html）的字体大小，也就是默认浏览器的字体大小。从遥远的IE6到各种现代浏览器的默认字体大小都是16px。使用示例： .titlefont-size:0.8rem; 一旦决定好职业，必须全心投入工作之中，必须爱自己的工作，千万不要有怨言，必须穷尽一生磨练技能，这就是成功的秘诀，也是让人家敬重的关键。响应式字体单位之战23of25pxpx优点：精确，简单易写。缺陷：当页面被缩放时容易不堪入目emem优点：以父元素的字体大小为基准动态计算，满足缩放需求缺陷：你让那些数