1.对于横屏模式的小程序，在目标页面json文件中设置"pageOrientation":"landscape"即可实现全屏。该参数默认为“portrait”（竖屏），设置为“auto”表示自动与手机系统切换。需要注意的是，设置横屏后，rpx单位将不再生效。有人建议使用px，但是这样不能实现自适应布局，所以需要引入一个新的单位：vmin。2.尺寸单位vminvmin：视口宽度vw和高度vh之间的最小值，其实有vmin自然会有为vmax，vmax表示视口宽度vw和高度vh之间的最大值，我们都理解vw是当前设备宽度的1%，即1vw是设备宽度的1%，50vw是当前设备宽度的50%devicewidth（vh也是一样），vmin怎么理解，拆开来看就是v+min，前面的v还是vw中的v，min是w和h的最小值。这样vmin可以理解为当前设备最短边的1%（vmax是longs最短的1%ide），你马上就明白了吗？50vmin是最短边的一半，100vmin是最短边的全部。这两个单位什么时候用？情况一：一个可以一直显示在屏幕上的正方形（比如上图左边的黄色区域）可以定义如下：//表示宽和高都是从最短边取当前设备（无论设置为横向还是纵向，最短边为手机宽度）乘以.box的100%{width:100vmin;height:100vmin;}情况二：以屏幕最长边为边长的正方形（如上图右侧黄色区域所示）可以定义如下：//表示宽和高度取自当前设备最长边的100%（无论设置为横向还是纵向，最长边都是手机的高度）。框{宽度：100vmax；height:100vmax;}??因此，我们在小程序中使用vmin作为长度单位，可以保证所有元素都能正常显示，也可以适配各种尺寸的屏幕。但是这样一来，写CSS的时候不是很麻烦吗？我们要实现一个竖屏状态下200rpx*50rpx的按钮。如果在横屏状态下以vmin为单位，宽高是多少？这里涉及到rpx和vmin之间的单位转换，所以我们需要定义一个转换函数来帮助我们处理这些转换逻辑。本文介绍如何在微信小程序中使用SCSS。这里我们使用SCSS来定义函数：//rpxtovmin@functionvmin($rpx){@return#{$rpx*100/750}vmin;}所以在横屏页面下，我们可以定义一个按钮来使其自适应：.btn{width:vmin(200);height:vmin(50);}最终渲染结果为：.btn{width:26.66667vmin;height:6.66667vmin;}你失学了吗？微信搜索“熊猫活动助手”即可进入体验。小程序中的开奖界面采用横屏模式，可进入小程序进行体验，详见《如何制作一个抽奖点名工具》。
