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可以很好的来判断兼容和适配

相关推荐
英俊潇洒美少年16 小时前
Vue 生产环境打包:SourceMap、压缩、混淆、Gzip、多环境配置 企业级最佳实践
前端·javascript·vue.js
MXN_小南学前端16 小时前
Vue 后台管理系统:封装通用el-table导出方法(附完整源码)
javascript·vue.js
2601_9577867716 小时前
企业矩阵运营的“三段论“:管号、产内容、获线索——全链路系统的价值拆解
java·前端·矩阵·多平台管理
城市的稻草人VS16 小时前
rust【日志库】
前端·rust
问心无愧051317 小时前
ctf show web 入门258
android·前端·笔记
xwjalyf17 小时前
javascript数组 forEach,filter,some,every,map,find,reduce的用法与区别
开发语言·javascript·json·ecmascript
海兰17 小时前
【小程序】 贪吃蛇(Next.js+WebSocket+SQLite + Prisma ORM)
javascript·websocket·小程序
qq_25183645717 小时前
基于java Web 耗材购置与维修网络申报审批系统设计与实现
java·开发语言·前端
UXbot17 小时前
企业AI开发工具:界面自动生成与前端代码交付能力详解
前端·人工智能·交互·web app·ui设计
专业技术员!!!!17 小时前
陪玩系统前端核心功能详解|线上线下陪玩平台开发方案
前端·陪玩系统·电竞陪玩