HTML5场景应用一（1）

　　　　什么是场景应用？

　　　　　　基于微信开发的一种网页类型，它的特点就是创意新，效果炫，有利于商家的营销传播。

　　　　如何制作场景应用？

　　　　　　代码实现　　　　　　

　　　　　　　　html5+css3+js（jq）

　　　　　　使用微场景制作工具实现

　　　　　　　　1.半定制微场景制作工具

　　　　　　　　　　易企秀、兔展等。

　　　　　　　　2.定制微场景制作工具

　　　　　　　　　　vxpro互动大师。

　　　　　　如果时间紧可以尝试用微场景制作工具去做，毕竟效率快、傻瓜式操作（vxpro互动大师需要一定时间去学习），但是身为一名前端必须要学会用代码去实现。

　　　　场景运行环境？

　　　　　　打开的微信场景都是在微信内嵌的浏览器上打开的，所以场景就是普通的网页。

　　　　　　Chrome自带移动端Emulation(模拟器)

　　　　 刮开效果

　　　　　　加载，刮开，划屏，动画，音乐等

　　　　　　具体请参照：http://bbs.miaov.com/forum.php?mod=viewthread&tid=13378&extra=page%3D1

　　　　如何使用chrome手机模拟器？

　　　　　　首先F12打开开发者调试台

　　　　　　然后点击小手机图标或者选择Emulation，选择要模拟的设备，比如说Iphone4，再重现刷新下页面。

　　　　常用的单位

　　　　　　在PC端常用的单位有px、em、%等，在移动端除了这些，还可以用分辨率来表示。

　　　　设备分辨率

　　　　　　也可以称为设备屏幕的大小。

　　　　屏幕分辨率

　　　　　　手机屏幕具体由多少个像素组成。

　　　　常用手机的分辨率

　　　　　　iphone3

　　　　　　　　设备分辨率：320*480

　　　　　　　　屏幕分辨率：320*480

　　　　　　iphone4

　　　　　　　　设备分辨率：320*480

　　　　　　　　屏幕分辨率：640*960

　　　　　　iphone5

　　　　　　　　设备分辨率：320*568

　　　　　　　　屏幕分辨率：640*1136

　　　　　　iphone6

　　　　　　　　设备分辨率：378*667

　　　　　　　　屏幕分辨率：750*1134

　　　　　　一般手机的设备分辨率在300~400之间，手机的屏幕分辨率会越做越大，理论上根据屏幕分辨率的大小来设计图片最合适。

　　　　低分辨率图片在高分辨率屏幕上是模糊的

　　　　　　低分辨率的图片（比如说是320*480）放在iphone3下面是刚刚好正常显示，放在iphone4下，图片一像素对应iphone4屏幕的4像素，只有一个像素显示，其余三个像素是空的，所以低分辨图片在高分辨率屏幕上是模糊的

　　　　高分辨率图片在低分辨率屏幕上呈锯齿状（马赛克）

　　　　　　高分辨率的图片（比如说640*960）放在iphone4下面是刚刚好正常显示，放在iphone3下，图片4像素对应iphone3屏幕的1像素，呈锯齿状，也就是常看到的马赛克。

　　　　屏幕分辨率与设备分辨率的比值

　　　　　　window.devicePixelRatio=屏幕分辨率/设备分辨率，根据比值的大小去调对应的图片：

　　　　　　　　iphone3 　　　　 1 　　 logo.png

　　　　　　　　iphone4 　　 　　2 　　 logo@2x.png
　　　　　　　　iphone6plus 　　 3 　　 logo@3x.png

　　　　　　主流屏幕分辨率：

　　　　　　　　iphone4:640*960

　　　　　　　　iphone5:640*1136

　　　　viewport(默认视口)

　　　　　　手机上可视的区域就叫做视口，是显示html页面的大小，跟设备分辨率和屏幕分辨率无关。

　　　　　　更改视口大小:　　

　　　　　　　 <meta name="viewport" content="width=640, user-scalable=no,target-densityDpi=device-dpi">

　　　　　　　　width=device-width 意思是视口大小跟设备大小是一样的，这里设置成640

　　　　　　　　user-scalable=no 防止缩放

　　　　　　　　target-densityDpi=device-dpi 专门针对安卓下的防止缩放

　　　　background-size:cover;

　　　　　　让整个高度被背景图撑开。

　　　　　　 高度多了，宽度不够撑到宽度，宽度够了，高度不够撑到高度，等比例放大

　　　　设计稿注意事项

　　　　　　设计成640*960可以满足绝大部分手机，稍微有点差异的可以使用background-size：cover；设计稿的左边、右边、下边稍微的留出一些背景图，主体内容尽量居中。

 

转载于:https://www.cnblogs.com/ajser/p/4810078.html