关于⼩程序横屏时字体、样式放⼤的原因已经解决⽅案
关于⼩程序为何不能由点击事件触发
由于开启横屏需要修改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;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论