uniapp 兼容pc与手机的样式方法

在h5的开发中,做视窗的样式兼容和适配,大家肯定都知道移动端使用自适应单位rpx,pc端可以使用媒体查询的方法来适配,但是在uniapp 项目开发中,有时在移动端展示的样式会被在桌面端打开,渲染在浏览器,这时候你会发现,因为用的是移动端适配的rpx 导致在pc端查看样式显示非常小,这时候,就需要做相应的兼容了,其实uniapp 也是有相应的方法来做识适配的:
当页面最小宽度 375px, 页面宽度最大 800px 时显示

复制代码
    <match-media :min-height="400" :orientation="landscape">
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
</match-media>

在uniapp中,match-media可以很好的来判断兼容和适配

相关推荐
记得记得就15120 小时前
【Nginx 实战系列(一)—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装】
前端·nginx·http
天蓝色的鱼鱼20 小时前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
JarvanMo20 小时前
适用于 iOS 开发者的 Flutter 3.38:Xcode 与 Swift 集成新技巧
前端
北极糊的狐20 小时前
Vue 中 vue-awesome-swiper的使用笔记(适配 Vue2/Vue3)
前端·javascript·vue.js
anyup20 小时前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
m0_6265352020 小时前
代码分析 长音频分割为短音频
javascript·python·音视频
2***574220 小时前
前端数据可视化应用
前端·信息可视化
xiaoxue..20 小时前
栈的全面解析:ADT、实现与应用
javascript·数据结构·面试
DevUI团队20 小时前
Angular开发者必看:深度解析单元测试核心技巧与最佳实践
前端·javascript·angular.js
Mintopia20 小时前
🌐 动态网络环境下的 WebAIGC 断点续传与容错技术
前端·人工智能·aigc