The causes of font and style enlargement when the applet is horizontal have been solved

About why applets cannot be triggered by click events

Since the horizontal screen needs to be modified json Configuration of files , This file cannot be modified while the program is running , So we can't rotate the mobile screen by clicking a button or other operations , It is just set to "pageOrientation":
"auto" The user actively rotates the mobile phone to trigger .

About applet rpx The definition of

We all know , Wechat applet is in vertical screen state , Width 100%,100VW The value of is 750rpx. But after the horizontal screen ,750rpx The actual width of is the height of the mobile screen .
under these circumstances , Our interface will get bigger .
A simple example , If the aspect ratio of the mobile phone screen is 1:2, We have a button size of 100rpx100rpx, So in the vertical screen state , According to the normal , In the horizontal screen state , The display width and height of the button will change to the original 2 times , Of course he's still 100rpx100rpx, But the display is getting bigger .

Vertical screen status is used rpx Make a layout

Solution

Use vmin To deal with （ Very vertical font 、 The style is the same as the horizontal screen ）
rpx And vmin The conversion relationship of ：5rpx Equivalent calc(5vmin * 100 / 750)== Simple writing ==>>5rpx Equivalent calc(5vmin / 7.5)

vmax Relative to the larger of the width or height of the viewport . The biggest one is divided equally into 100 The unit of vmax
vmin The smaller of the width or height of the viewport . The smallest of these is equally divided 100 The unit of vmin
Here we only use vmin.
When we are on the vertical screen ,100vmin The value of is the screen width of the mobile phone , When the screen is horizontal ,100vmin The value of is still the screen width of the mobile phone , So vmin Elements in units , When the mobile phone screen rotates , The display size does not change （ After all, no matter the horizontal or vertical screen ,100vmin Is equal to the width of the screen ）.
In the use of rpx When doing layout ,750rpx The value of is the width of the mobile phone screen , But in the use of vmin when ,100vmin The value of is the width of the mobile phone screen , therefore ,rpx and vmin There is a conversion relationship between , namely ：x rpx=( x * 100 / 750)vmin. for instance ,75rpx Turn into vmin by 75 * 100 / 750 = 10 vmin. therefore , We just need to rpx Turn it into vmin You can have a happy code page ~

Use scss To convert

//css function 
@function tovmin($rpx){
    //$rpx For the font size to be converted 
    @return #{
    $rpx * 100 / 750}vmin; 
}
// Usage mode  .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;
}