uniapp 屏幕适配问题

uniapp 为了适配各种屏幕可以使用 rem来进行

1. 使用 rpx 单位只能是竖屏使用
2. 使用 vmin vmax 不能对现有的折叠屏幕进行适配
3. 最终还是使用 rem 进行适配
4. 样式进行修改

//css函数 声明函数
@function toRem($rpx) {
    @return #{$rpx / 10}rem;
}

5. 适配代码 windowChange.js

let eventList = []
let fontsize = 0
function windowChange(app, type) {
    let srceenNunber = 42 // 根据设计稿计算的比例 设计稿宽度/10
    function computedFontSize(windowWidth, windowHeight) {
        console.log('窗口:', windowWidth, windowHeight)
        // 以最小边计算
        let width = Math.min(windowWidth, windowHeight)
        let height = Math.max(windowWidth, windowHeight)
        // 手机
        if (width < 480) {
            width = width
        } else if (width > 768 || height > 1000) {
            // 稍大屏幕
            width = 820
        } else {
            // 平板
            width = 420
        }
        console.log('最小窗口宽度=', width)
        fontsize = parseFloat(width) / srceenNunber
        console.log('字体大小：', fontsize)
        eventList.forEach((item) => {
            item(fontsize)
        })
    }
    //窗体改变大小触发事件
    uni.onWindowResize((res) => {
        computedFontSize(res.size.windowWidth, res.size.windowHeight)
    })

    //打开获取屏幕大小
    uni.getSystemInfo({
        success(res) {
            computedFontSize(res.screenWidth, res.screenHeight)
        }
    })
}

windowChange()

export function registerListenWinChange(callback) {
    callback(fontsize)
    eventList.push(callback)
}

export function removeListenWinChange(callback) {
    eventList.splice(eventList.indexOf(callback), 1)
}

6. 在每个页面中设置 fontsize 注：在pages.json中配置的页面

// template 下第一个放
<page-meta :root-font-size="rootFontSize + 'px'" user-scalable="no" viewport-fit="cover"></page-meta>

import { registerListenWinChange, removeListenWinChange } from '../../utils/windowChange'
// methods
fontSizeChange(fontSize) {
    this.rootFontSize = fontSize
}

mounted() {
  registerListenWinChange(this.fontSizeChange)
},
beforeDestroy() {
    removeListenWinChange(this.fontSizeChange)
}

华为折叠屏

1. 正常: windowWidth: 384 windowHeight: 896
2. 打开后: windowWidth: 682 windowHeight: 768

主流的屏幕分辨率

1. 平板
   • 1280*720(240dpi)
   • 1600*900(300dpi)
   • 1920*1080(360dpi)
   • 1920*1200(320dpi)
2. 手机
   • 720*1280(240dpi)
   • 900*1600(300dpi)
   • 1080*1920(360dpi)
   • 720*1280(320dpi)
   • 1200*1920(320dpi)
3. 超宽屏
   • 1600*720(240dpi)
   • 1800*810(270dpi)
   • 2400*1080(360dpi)

屏幕适配

/* 小屏幕设备 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

/* 中等屏幕设备 */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .container {
    padding: 20px;
  }
}

/* 大屏幕设备 */
@media (min-width: 769px) {
  body {
    font-size: 18px;
  }
  .container {
    padding: 30px;
  }
}

方向适配

/* 竖屏 */
@media (orientation: portrait) {
  /* 竖屏样式 */
}

/* 横屏 */
@media (orientation: landscape) {
  /* 横屏样式 */
}

分辨率适配

/* 低分辨率 */
@media (max-resolution: 120dpi) {
  /* 低分辨率样式 */
}

/* 高分辨率 */
@media (min-resolution: 192dpi) {
  /* 高分辨率样式 */
}