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

简介: 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 插件市场

相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
57 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
88 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
82 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
65 1
|
1月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
50 1
|
23天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
36 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
37 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
62 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
91 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
117 4