技术不行但人小帅 2023-02-12 17:59 采纳率: 59.2%
浏览 108
已结题

uniapp 适配移动端的逻辑是啥?

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

  • 写回答

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条)

报告相同问题?

问题事件

  • 系统已结题 2月20日
  • 已采纳回答 2月12日
  • 创建了问题 2月12日

悬赏问题

  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]
  • ¥15 uni.onBluetoothDeviceFound熄屏不运行
  • ¥35 关于shodan搜索网络摄像头的各种方法详解
  • ¥15 求PHDA糖尿病并发症数据集,有偿
  • ¥15 为什么AVL fire DVI 界面里面的response Editor project 中的Summary result 点不了
  • ¥20 中标麒麟系统V4.0,linux3.10.0的内核,3A4000处理器,如何安装英伟达或AMD的显卡驱动,
  • ¥20 求文心中文心理分析系统(TextMind)
  • ¥15 chipyard环境搭建问题