什么是场景应用?
基于微信开发的一种网页类型,它的特点就是创意新,效果炫,有利于商家的营销传播。
如何制作场景应用?
代码实现
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;设计稿的左边、右边、下边稍微的留出一些背景图,主体内容尽量居中。