微信小程序横屏状态下的自适应实践（尺寸单位vmin）

Posted 2023-04-15

参考技术A

在目标页面 json 文件里设置 "pageOrientation": "landscape" 即可实现全屏，这个参数默认是 "portrait" （竖屏），设置 "auto" 表示跟随手机系统自动转换。

需要注意的是，设为横屏后， rpx 单位不再生效，有人建议使用 px ，但是这样不能实现自适应布局，所以我们需要引入一个新的单位： vmin 。

vmin ：视口宽度 vw 和高度 vh 两者之间的最小值。

其实，有 vmin 自然就会有 vmax ， vmax 意为视口宽度 vw 和高度 vh 两者之间的最大值。

vw 我们都理解，是当前设备宽度的1%，即1vw就是设备宽度的1%，50vw就是设备宽度的50%（ vh 同理）

vmin 怎么理解呢？拆一下，看成 v + min ，前面的 v 还是 vw 中的 v ， min 则是 w 和 h 中的最小值，这样一来， vmin就能理解为当前设备最短边的1% （ vmax 则是最长边的1%），是不是立马就懂啦？50vmin就是最短边的一半，100vmin就是最短边的全部。

什么时候会用到这两个单位呢？

案例1：一个总能展示在屏幕的正方形（如上图左边黄色区域）可以这样定义：

案例2：一个以屏幕最长边为边长的正方形（如上图右边黄色区域）可以这样定义：

所以，我们在小程序中使用 vmin 作为长度单位就能保证所有元素都能正常展示，也可以适应各种尺寸的屏幕了。

但是这样一来，写CSS的时候不就很麻烦？我们想实现一个竖屏状态下是200rpx * 50rpx的按钮，在横屏状态下使用 vmin 做单位的话，宽高各是多少呢？这涉及 rpx 和 vmin 的单位换算，所以我们需要定义一个转换函数帮助我们处理这些转换逻辑。

这篇文章 介绍了如何在微信小程序中使用SCSS，这里我们使用SCSS定义该函数，：

于是，横屏页面下，我们可以这样定义一个按钮使之做到自适应：

最终渲染出来的结果是：

你学废了吗？

微信搜索「 熊猫活动助理 」进入体验。

小程序中的抽奖界面使用了横屏模式，可以进入小程序体验一下，具体操作可参考 《如何制作一个抽奖点名工具》 。

微信小程序尺寸单位rpx以及样式相关介绍

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0

 微信小程序尺寸单位

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算

 小程序的样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

 小程序内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

 css选择器

微信小程序目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

 小程序的全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

本文链接：微信小程序尺寸单位rpx以及样式相关介绍http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html