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

相关推荐
郑州光合科技余经理2 分钟前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
zzppff1p14 分钟前
用AI写了个小游戏
前端·javascript
陈随易16 分钟前
终于 Token 自由了,AI 开支下降 10 倍
前端·后端·程序员
gqc5843 分钟前
Markdown 写完怎么验证?我现在的 4 步本地检查流程
前端
普通人61 小时前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
KumaoHub1 小时前
棋牌游戏开发中聊天文本的长度限制与安全显示
javascript
计算机魔术师1 小时前
我重算了新云的账,发现亏的不是算力,是时间
前端
G018_star sky♬1 小时前
nodeJS他是如何用JavaScript封装C++的呢
开发语言·javascript·c++
wiseyao12192 小时前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
陈随易2 小时前
从今天起,你只需要一个浏览器之Ego lite
前端·后端·程序员