平台兼容性
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 ) |