小程序基础库基于 window.matchMedia API 新增了一组过程式与定义式接口 match-media 。开发者可以通过 <match-media></match-media> 和 wx.createMediaQueryObserver 来显式地使用媒体查询能力，对于多端适配来说，它有以下优势：
- 开发者能够更方便、显式地使用 Media Query 能力，而不是耦合在 CSS 文件中，难以复用。
- 能够在 WXML 中结合数据绑定动态地使用，不仅能做到组件的显示或隐藏，在过程式 API 中可塑性更高，例如能够根据尺寸变化动态地添加 class 类名，改变样式。
- 能够嵌套式地使用 Media Query 组件，即能够满足局部组件布局样式的改变。
- 组件化之后，封装性更强，能够隔离样式、模版以及绑定在模版上的交互事件，还能够提供更高的可复用性。
- 浏览器内置 API ，能够在所有基于 Webview 的小程序上使用，兼容性良好。 match-media 具体使用方法可参考相关 API 文档。
4. 自适应布局
为了让开发者更好的自适应大屏，小程序提供了 row/col 组件 供开发者使用。
自适应的主要特性是：
- 整行最多只有 24 份，对于的排列会自动向下换行
- 每个尺寸设置并不会影响到其它尺寸的布局
设计指引与代码示例
关于如何在设计、用户体验上实现更好的多端适配小程序。
同时我们也提供了多端适配示例小程序 ，基于 row/col 组件 简单实现了常见的适配场景，例如：
- 屏幕越大，布局不变，模块左右伸缩
- 屏幕越大，内容越多，模块内容换行排列
- 屏幕越大，布局改变，模块内容可折叠 / 展现
体验路径：“扩展能力” -> “多端适配（需在PC端体验）”
标签：微信小程序
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
