关于小程序为何不能由点击事件触发
由于开启横屏需要修改json文件的配置，而这个文件我们无法在程序运行中进行修改，故我们无法通过点击按钮或其他操作去使手机屏幕发生旋转，只是是设置为"pageOrientation":
"auto"用户主动旋转手机触发。
关于小程序rpx的定义
我们都知道，微信小程序在竖屏状态下，宽度100%，100VW的值为750rpx。但是在横屏之后，750rpx的实际宽度为手机屏幕的高。
在这种情况下，我们的界面将会变大。
举个简单例子，假如手机屏幕的宽高比为1:2，我们有一个按钮大小为100rpx100rpx，那么在竖屏状态下，显示正常，横屏状态下，按钮的显示宽高将会变成原来的2倍，当然他仍然是100rpx100rpx，但是显示出来却是变大了。
竖屏状态使用rpx进行布局
解决方案
使用vmin进行处理（很竖屏字体、样式都与横屏一样）
rpx与vmin的换算关系：5rpx 等价 calc(5vmin * 100 / 750)== 简单写==>>5rpx 等价 calc(5vmin / 7.5)
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
在这里我们只用到了vmin。
当我们在竖屏时候，100vmin的取值为手机屏幕宽度，当横屏时候，100vmin的取值仍然为手机屏幕宽度，所以以vmin为单位的元素，在手机屏幕发生旋转的时候，其显示大小并不会发生改变（毕竟不管横屏竖屏，100vmin都等于屏幕的宽度）。
在使用rpx进行布局时，750rpx的取值为手机屏幕的宽度，而在使用vmin时，100vmin的取值为手机屏幕的宽度，所以，rpx和vmin之间存在一个换算关系，即：x rpx=( x * 100 / 750)vmin。举个例子，75rpx转化为vmin为75 * 100 / 750 = 10 vmin。所以，我们只要将rpx转化成vmin就可以愉快的码页面了~
使用scss进行转化
//css函数
@function tovmin($rpx){//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
//使用方式
.slideAddPanel {
width: tovmin(48);
height: tovmin(80);
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 tovmin(2) tovmin(12) 0 rgba(0, 0, 0, 0.2);
line-height: tovmin(80);
border-radius: 0 tovmin(10) tovmin(10) 0;
}