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

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;
    }
    
    

    市面上各种手机各种各样,平板也是,但是使用上述适配方法可以适配大多数移动设备,并保证页面在不同设备上呈现出相似的效果。如果需要进一步适配某些特殊的设备,可以使用媒体查询来实现。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 15768521179 2023-02-12 19:03
    关注

    1.uniapp 适配移动端的逻辑
    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,它的目的是让开发者可以使用统一的前端代码开发出同一份代码在多个平台(iOS、Android、H5、小程序等)上运行的应用,且能够表现一致。因此,它内置了智能的适配方案,只需要开发者在不同平台之间维护不同的视图层就可以实现跨平台适配。

    2.
    小程序采用了 WXML 和 WXSS 两种模板,分别对应 HTML 和 CSS。
    小程序可以使用 App、Page、Component 等组件和模块,来实现小程序界面的构建。
    小程序的API接口可以实现数据交互,比如数据缓存,网络请求等。
    小程序通过封装 Weixin JS-SDK,实现了多个基础库,比如支付、地理位置等功能。
    小程序由运行时环境(JavaScriptCore)和原生环境(Native)构成,从而实现跨平台适配移动端。

    方案:
    1.首先要根据不同机型,添加或者重写css样式,例如:

    @media screen and (min-width:320px) and (max-width:414px){

    /* iphone 6-7-8 plus */

    }

    @media screen and (min-width:375px) and (max-width:667px){

    /* iphone 6-7-8 */

    }

    @media screen and (min-width:414px) and (max-width:736px){

    /* iphone x */

    }

    @media screen and (min-width:768px) and (max-width:1024px){

    /* ipad */

    }

    2.使用uni-app官方提供的组件flexible组件,它可以自动适配不同屏幕尺寸,以及自动调整字体大小。

    3.使用第三方插件,如lib-flexible,它可以自动根据不同的设备和分辨率,计算出正确的布局尺寸,从而达到自适应的效果。

    4.使用vw和vh单位,通过设置不同设备的宽度和高度,来改变布局的样式,从而实现自适应的效果。

    评论 编辑记录
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-13 22:12
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论
查看更多回答(2条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 最小生成树问题 Prim算法和Kruskal算法
  • ¥25 医院住院病人呼叫器设计
  • ¥15 不想和现在的团队合作了,怎么避免他们对程序动手脚
  • ¥30 c++类和数组实验代码
  • ¥20 C语言字符串不区分大小写字典排序相关问题
  • ¥15 关于#python#的问题:我希望通过逆向技术爬取1688搜索页下滑加载的数据
  • ¥15 关于Linux的终端里,模拟实现一个带口令保护的屏保程序遇到的输入输出的问题!(语言-c语言)
  • ¥30 请问,这个嵌入式Linux系统怎么分析,crc检验区域在哪
  • ¥15 二分类改为多分类问题
  • ¥15 Unity微信小游戏上调用ReadPixels()方法报错