请问一下怎么适配手机和平板的样式?
市面上各种手机各种各样,平板也是, 用媒体查询适配好这一台另外一台就有问题,有没有什么适配大多数机型的方案呢?
我在网上看到以768rpx来计算?

uniapp 适配移动端的逻辑是啥?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- 快撑死的鱼 2023-02-12 19:07关注
回答不易,求求您采纳哦 感激不尽
UniApp 是一个使用 Vue.js 开发跨平台应用的框架,可以在 iOS、Android、H5 等多个平台上运行。适配移动端的逻辑是在 UniApp 中使用媒体查询(Media Query)来适配不同的移动设备。
在 UniApp 中,可以使用 rem 单位来适配移动端的样式。rem 单位是相对于根元素(一般是 html 元素)的字体大小的单位,可以在 JavaScript 中动态设置根元素的字体大小,从而实现适配不同的移动设备。
例如,可以在页面加载时计算出设备的宽度,并动态设置根元素的字体大小:
// 计算设备宽度 var deviceWidth = document.documentElement.clientWidth || window.innerWidth; // 动态设置根元素字体大小 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
然后,就可以使用 rem 单位来适配移动端的样式了:
.container { width: 6.4rem; height: 4.8rem; margin: 0.8rem auto; background-color: #fff; }
关于使用 768rpx 进行适配,这是一种常用的适配方法。它的思想是将设备的宽度固定为 768px,然后再使用 rpx 单位来进行适配。在 UniApp 中,也可以使用这种方法来适配移动端的样式:
// 计算设备宽度 var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //动态设置根元素字体大小 document.documentElement.style.fontSize = deviceWidth / 7.68 + 'px';
然后,就可以使用 rpx 单位来适配移动端的样式了:
.container { width: 640rpx; height: 480rpx; margin: 80rpx auto; background-color: #fff; }
市面上各种手机各种各样,平板也是,但是使用上述适配方法可以适配大多数移动设备,并保证页面在不同设备上呈现出相似的效果。如果需要进一步适配某些特殊的设备,可以使用媒体查询来实现。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 2无用
悬赏问题
- ¥15 最小生成树问题 Prim算法和Kruskal算法
- ¥25 医院住院病人呼叫器设计
- ¥15 不想和现在的团队合作了,怎么避免他们对程序动手脚
- ¥30 c++类和数组实验代码
- ¥20 C语言字符串不区分大小写字典排序相关问题
- ¥15 关于#python#的问题:我希望通过逆向技术爬取1688搜索页下滑加载的数据
- ¥15 关于Linux的终端里,模拟实现一个带口令保护的屏保程序遇到的输入输出的问题!(语言-c语言)
- ¥30 请问,这个嵌入式Linux系统怎么分析,crc检验区域在哪
- ¥15 二分类改为多分类问题
- ¥15 Unity微信小游戏上调用ReadPixels()方法报错