如何放大手机字体

关于⼩程序横屏时字体、样式放⼤的原因已经解决⽅案

关于⼩程序为何不能由点击事件触发

由于开启横屏需要修改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之间存在⼀个换算关系，即：xrpx=(x*100/750)vmin。举个例⼦，75rpx转化为vmin为75*100/750=10vmin。

所以，我们只要将rpx转化成vmin就可以愉快的码页⾯了~

使⽤scss进⾏转化

//css函数

@functiontovmin($rpx){//$rpx为需要转换的字号

@return#{$rpx*100/750}vmin;

}

//使⽤⽅式

.slideAddPanel{

width:tovmin(48);

height:tovmin(80);

background:rgba(0,0,0,0.5);

box-shadow:0tovmin(2)tovmin(12)0rgba(0,0,0,0.2);

line-height:tovmin(80);

border-radius:0tovmin(10)tovmin(10)0;

}