Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件

平台兼容性

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 ）

链接：TC-match-media 检测节点 适配大屏小屏 不同屏幕视图组件 - DCloud 插件市场