小程序大屏适配指南概述
为了保证用户在PC端使用小程序时获得流畅友好的体验，本指南将提供一系列与大屏适配相关的建议供参考。
1. 为什么我们需要适应？
由于用户可以在PC上使用小程序，并且可能会在不同尺寸的视图之间切换，为了保证小程序在不同屏幕尺寸上的体验流畅友好，我们建议开发者根据用户的设备自行定制小程序和场景。 适应。 适配推荐网格系统，配合响应策略，实现动态页面布局。
网格系统具有规律性，其元素的宽度和高度可以使用百分比来呈现。 该特性使得使用网格系统设计的页面和布局具有规律性，从而提高了不同分辨率下页面布局的一致性和可重用性。 性别。
响应性是系统对外部变化的反馈和适应，即通过合理的设计方案和标准化技术制定的变化策略。
响应式策略的制定可以保证小程序在任何屏幕尺寸上的使用体验保持合理一致。
2. 不适配PC端小程序体验
如果没有适配的微信小程序，您将无法在PC上切换小程序窗口大小。 具体显示规则如下。
竖屏显示小程序
无论屏幕尺寸如何，始终以手机尺寸414x736显示。
小程序横向展示
无论屏幕尺寸如何，它始终以平板电脑尺寸 768x1024 显示。
竖屏显示小游戏
以平板尺寸1072x768作为基础屏幕尺寸，小游戏窗口根据手机尺寸320x568按比例缩放。
横屏显示小游戏
以平板尺寸1072x768作为基础屏幕尺寸，小游戏窗口根据手机尺寸736x414按比例缩放。
开发者适配设计指南一、适配基本原则
PC端的屏幕尺寸相比移动端具有更大的内容展示空间和显示优势。 例如，可以同时打开多个窗口、可以拖动窗口、可以将窗口切换为不同的大小。 为了提高屏幕利用率，最大化增大屏幕带来的体验附加值，适配过程中遵循以下体验原则：
(1)查看信息显示完整可读
小程序视图尺寸切换后，应保证视图信息完整、可读，不应出现信息变形、丢失、分辨率降低等变化。
(2)视图尺寸切换交互流畅友好
小程序视图放大后数据报告，可以显示更多信息； 视图切换过程应该流畅、友好，并可以通过适当的手段来优化小程序的布局。
2.动态布局-常用布局方法
(1)左右伸缩
布局特点：将页面元素水平拉伸到合适屏幕尺寸的区域。 常用于具有简单元素/结构的页面，例如列表、表格等。
适配规则：页面显示高度固定，宽度不是固定值； 当布局的显示尺寸改变时游戏ui界面尺寸，元素的显示宽度也会随之改变。
(2) 换行排列
布局特点：根据布局宽度从上到下或从左到右排列页面元素。 常用于信息架构层次较少的内容展现页面，如内容详情页面等。
适配规则：确定布局区域的水平宽度以及是否可以容纳多个元素。 如果可以容纳的话，采用左右排列。 如果无法容纳，则采用上下布置。
(3)横向扩展
布局特点：重复并扩展页面元素到适合相对屏幕尺寸的区域。 常用于模块结构固定、模块内布局简单有序的页面，例如电子商务。
适配规则：在保持某一页面元素大小或间距不变的情况下，根据布局区域的水平宽度水平添加更多元素。
(4) 分页显示
布局特点：利用屏幕宽度，将具有相同属性的布局组件水平并排排列。 常用于信息架构层次较低的内容呈现页面，如播放列表、应用列表等。
适配规则：可以定义单个组件的宽度规则，随着布局区域水平宽度的变化，自动计算可重复元素的数量。
(5)分层展示
布局特点：将页面分成多栏，分区域展示各个模块的内容。 立柱具有明显的主从关系，从属部分依赖于主导部分而存在。 常用于层次结构清晰、分栏显示不影响信息获取的页面，如工具应用等。 左侧为主菜单，中间为子菜单，右侧为内容详情。
适配规则：设置每列的最小宽度，根据布局区域的水平宽度确定可容纳的层数，并显示可呈现的列数。
(6)自由布局
布局特点：将页面划分为多个功能模块。 确定主模块后，围绕主模块布置从属模块。 常用于页面中有多个功能模块，其中只有一个主模块的情况，如内容详情页等。
适配规则：确定主模块的最大显示值和固定位置。 当布局区域的水平宽度发生变化时游戏ui界面尺寸，从模块会自动计算主模块周围的可呈现模式。
(7) 侧边栏
布局特点：页面中有明显的主从关系。 主要模块是导航模块。 大尺寸时，主模块可以以侧边栏的形式展示，以便页面可以快速浏览或同时操作主从模块。
适配规则：设置分页断点宽度。 如果超过断点大小，主模块会切换到页面侧边栏，从模块会根据布局区域的宽度自动计算可以呈现的信息量。
3.交互方式翻译——手势交互和鼠标
与手机版不同的是，PC版主要依靠鼠标和键盘进行操作，这使得PC版可以提供物理且更稳定的控制。 由于指针较小，用户可以更准确地定位和操作。
为了让小程序更好的适用于PC端，在适配过程中，需要将移动端小程序依赖手势输入进行的操作映射到PC端。
常用交互方式翻译对照表
移动端和PC端都有自己独特的交互方式。 适配过程中可以参考以下翻译方法。
4.适应其他注意点
PC端小程序适配时，需要特别注意以下几个关键点。
(1)导航栏和标签栏
适配后导航栏和标签栏（如果有）的高度保持不变。
(2) 弹出窗口
为了避免弹出窗口控件因适配而变形，可以将弹出窗口控件以跟随鼠标指针的形式呈现。
(3) 悬浮工具栏
由于窗口位置的变化，浮动工具栏可能会出现在可见范围之外。 在PC适配中数据报告，如果工具栏与特定区域相关，建议使用更稳定的形式来呈现。
(4)页面刷新操作
PC端，手指下拉刷新页面的操作方式并不友好。 在适配过程中，如果你的小程序页面需要刷新，就需要使用相对稳定的呈现格式来呈现。
文章来源:https://developers.weixin.qq.com/miniprogram/design/adapt.html
