1、在app.json文件中，与“window”同级别的地方增加配置 "resizable": true； 2、在app.json文件中，“window”模块中增加"pageOrientation":"landscape"。 这样配置后，就可以让小程序的页面呈现横屏状态，然后用户只需要点击右上角的全屏按钮就可以全屏了，赶紧去试试吧。  3、如果有的页面不想横屏显示的话，只需要在这个页面下的json文件中加上配置"pageOrientation":"portrait"即可。 这样配置后，只有页面json文件中配置了portrait的才会竖屏显示，其他的就都默认横屏显示了。 4、发现的问题：如果全局window设为了landscape，而某个页面，比如叫A页面中的json文件中单独设置了portrait（竖屏显示），假如你恰好在A页面加了激励式视频广告，那么你就会发现本来事竖屏显示的A页面，在点击观看激励式视频广告后返回来的时候就被强制显示为横屏了。 以上是我在项目中时间pc端全屏和小程序横竖屏显示配置时的总结和发现的问题，希望能给有需要的人带来帮助。

背景 在h5开发中可用的css适配单位有 em/百分比/rem/vw/vh/vmin/vmax，小程序提供了 rpx: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。 日常小程序开发中，一般设计图尺寸为 750 * 1334 px，则在小程序中一般 1px 直接写为 1rpx ，当小程序为竖屏（[代码]"pageOrientation": "portrait"[代码] 默认为竖屏）时，根据 rpx 可以直接还原UI图，但是当小程序为横屏（[代码]"pageOrientation": "landscape"[代码]）时，根据 rpx 适配就明显比较大，不符合UI图，因为 rpx 是根据屏幕宽度适配的。 这个时候就需要一种既能适配不同屏幕大小，又能以设计图为准，快速布局的方式。通过了解 em/百分比/rem/vw/vh/vmin/vmax 这几种方式，明显 vmin 更符合，vmin 是vw和vh中比较 小 的值。 vw： Viewport宽度， 1vw 等于viewport宽度的 1%。 vh： Viewport高度， 1vh 等于viewport高的的 1%。 所以 100 vmin = 750px。 [代码].wxss[代码] 文件处理 当设置某个元素的宽度为 100px 时，根据 [代码]100px / 750px = x / 100vmin[代码] ，则对应的 vmin 值为 100vmin / 7.5 ，当单位为 rpx 时， vmin 值为 100vmin / 7.5 ，即 [代码]100px = 100vmin / 7.5[代码] 或者 [代码]100rpx = 100vmin / 7.5[代码] ，但是每次都写 [代码]vmin / 7.5[代码] 又有点麻烦，所以就写了个小工具 rpx2vmin ，支持将 rpx/px 转译为 vmin，这样布局的时候依然写 rpx/px ，最后再转译一下就可以了。 将需要转译的 [代码].wxss[代码] 文件复制粘贴到 [代码]input[代码] 文件下，在项目目录下执行如下命令行 ，会在 [代码]ouput[代码] 目录下生成对应的文件名称，需要提前安装 nodejs。 [代码]# 安装依赖 npm install # 将 rpx 转译为 vmin npm run rpx2vmin # 将 px 转译为 vmin npm run px2vmin [代码] 主要处理的如下： [代码]font-size: 12rpx; height: 60rpx; padding: 12rpx 16rpx; border-left: 2rpx dashed #5DA5FF; width: calc(100vw - 50rpx - 80rpx); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] 或者是： [代码]font-size: 12px; height: 60px; padding: 12px 16px; border-left: 2px dashed #5DA5FF; width: calc(100vw - 50px - 80px); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] js 中的处理 某些时候我们可能需要通过 js 计算设置，这个时候可以通过 wx.getSystemInfo() 得到 [代码]windowWidth[代码]（可使用窗口宽度，单位px） 和 [代码]windowHeight[代码]（可使用窗口高度，单位px） ， [代码]100vmin = Math.min(windowWidth, windowHeight)[代码]， [代码]1px = Math.min(windowWidth, windowHeight) / 750[代码] ，其中750为布局的时候可视窗口的最小宽度，其他尺寸乘以比例即可得到对应的 px 值或者 rpx 值。

本节课程主要围绕第一个 Hello world 小程序的开发，带你了解小程序开发者工具及基本框架。 iframe class="embed-responsive-item vqq-player" type="text/html" width="640" height="390" src="https://v.qq.com/txp/iframe/player.html?vid=p0872j7l9xw&disableplugin=IframeBottomOpenClientBar&&auto=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>