平台兼容性
| Vue2 | Vue3 |
| √ | √ |
| App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
| HBuilderX 3.1.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
| 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
| √ | √ | × | √ |
| H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
TC-match-media
media query 匹配检测节点。
开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。
引入组件即可
<template> <view> <TC-match-media></TC-match-media> </view> </template>
如需要删除多余的部分
uni_modules/TC-match-media/components/TC-match-media/TC-match-media
以上路径上进行修改即可
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
| min-width | number | 否 | 页面最小宽度( px 为单位) | |
| max-width | number | 否 | 页面最大宽度( px 为单位) | |
| width | number | 否 | 页面宽度( px 为单位) | |
| min-height | number | 否 | 页面最小高度( px 为单位) | |
| max-height | number | 否 | 页面最大高度( px 为单位) | |
| height | number | 否 | 页面高度( px 为单位) | |
| orientation | string | 否 | 屏幕方向( landscape 或 portrait ) |
