自动适应多种播放设备

卡哇伊的渣渣

平常我们再做一些h5的微信小游戏的时候，会遇到一件非常烦恼的事情。那就是我们不同的手机打开的时候，有些手机打开下方会有白条，有些手机会显示不完全。那么这种情况我们应该怎么办呢？今天给大家介绍一种完美适配的方法，那就是利用vx互动大师做H5作品后做自适应。

步骤一：注册并新建案例

1.注册登陆后，点击我的作品——创建作品。





2.打开编辑器




步骤二：新建长款手机移动设备

1.选择移动设备工具，新建移动设备




2.右键重命名移动设备为长款手机，为了测试的时候方便辨认，设置了一个背景色




3.长款手机一般是屏幕比较长的手机，安卓的一般默认是的1008px的高度，也是苹果5s的高度，如果想要适配更长的手机，一般苹果6的高度是1030px，苹果6P的高度是1040px。




4.我们在上面添加一个文本“长款手机”，标注一下这个移动设备。




步骤三：新建短款手机设备

1.方法同步骤二，新建一个移动设备，重命名为短款手机，并为其设置背景颜色和添加一个文本“短款手机”。




2.高度设置为832px。




步骤四：新建pad横屏设备

1.方法同步骤2，新建移动设备，重命名为pad横屏，并为其设置背景颜色和添加一个文本“pad横屏”。





2.高度设置为（）。

步骤五：新建PC设备

1.选择PC设备工具，新建PC设备。




2.设置设备1的高度为600px * 400px，这是普遍的pc端网页的大小。




3.为了方便辨认，设置背景颜色和添加中文字体“PC”。




步骤六：测试设备。

1.拿不同的设备打开它我们就可以看到不同的效果啦！是不是很简单呢！






任何技术性的问题可以加入“VXPLO互动大师技术服务”群：301817884
或者点击“VXPLO互动大师”直接进入官网体验
VXPLO互动大师欢迎对交互设计有想法的各位朋友们的加入！