uniapp 屏幕适配问题(折叠屏幕、手机、平板)

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

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

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

再手机缩小到后台，重新打开，会导致重新计算html font-size 大小，所以使用 renderjs 来进行修改

<template>
    <view></view>
</template>

<script>
export default {
     
     }
</script>

<script module="rootFontSize" lang="renderjs">
let observer
function debounce(func, delay) {
     
     
	let timer = null
	return function () {
     
     
		const context = this
		const args = arguments
		clearTimeout(timer)
		timer = setTimeout(() => {
     
     
			func.apply(context, args)
		}, delay)
	}
}
export default {
     
     
	methods: {
     
     
		computedFontSize: debounce((windowWidth, windowHeight) => {
     
     
			let srceenNunber = 42 // 根据设计稿计算的比例 设计稿宽度/10
			console.log('窗口:', windowWidth, windowHeight)
			// 以最小边计算
			let width = Math.min(windowWidth, windowHeight