关于移动端横纵两个方向长度固定的屏幕适配方案

背景

大部分app的适配只需要针对一个维度进行适配就行了, 以为另外一个维度是可以上下拖动, 即理论上是无限大小的. 但是之前公司做的一个移动端的项目, 需要两个维度都固定, 无法拖动. 这就导致了必须针对不同屏幕比设计不同的设计稿, 同时使用相应长宽比的css规则

方案

采用@media中的min-aspect-ratio与max-aspect-ratio

假设设计师给出了 4/3, 667/375, 2/1两款长宽比的设计稿, 只需要让长宽比更接近4/3选择 4/3的css规则, 让接近2/1的采用2/1的规则, 于是我们需要算出两列之间的中间值

@media (max-aspect-ratio: 3501/2250) {
     编写响应 4:3 设计稿上的规则
}

@media (min-aspect-ratio: 3501/2250) and (max-aspect-ratio: 1417/750){
     编写响应 667:375 设计稿上的规则
}

@media (min-aspect-ratio: 1417/750) {
     编写响应 2:1 设计稿上的规则
}

这个方案的麻烦点在于每次新添加一个新的长宽比设置的话, 就需要重新计算这些值, 还需要对所有css文件添加@media规则, 因此如果使用webpack打包项目的话, 可以编写一个简单的loader来做这些事情

编写思路

// step1 添加当前有的设计稿
let arr = [
  {
    w: 4,
    h: 3
  },
  {
    w: 667,
    h: 375
  },
  {
    w: 2,
    h: 1
  }
].map(v => {
  return {
    ...v,
    type: `v-${v.w}-${v.h}`
  }
})

// step2 根据长宽比大小排序
arr = arr.sort((v1, v2) => v1.w/v1.h - v2.w/v2.h)

// step3 计算与相邻配置的平均值
arr.forEach((val, idx) => {
  if (idx === 0) {
    val.media = `@media (max-aspect-ratio: ${cal(val, arr[idx + 1])})`
  } else if (idx === arr.length - 1) {
    val.media = `@media (min-aspect-ratio: ${cal(val, arr[idx - 1])})`
  } else {
    val.media = `@media (max-aspect-ratio: ${cal(val, arr[idx + 1])}) and (min-aspect-ratio: ${cal(val, arr[idx - 1])})`
  }
})
/*
[ { w: 4, 
    h: 3, 
    type: 'v-4-3', 
    media: '@media (max-aspect-ratio: 3501/2250)' }, 
  { w: 667, 
    h: 375, 
    type: 'v-667-375', 
    media: '@media (max-aspect-ratio: 1417/750) and (min-aspect-ratio: 3501/2250)' }, 
  { w: 2, 
    h: 1, 
    type: 'v-2-1', 
    media: '@media (min-aspect-ratio: 1417/750)' } ] 
*/

step4: 在响应的css文件标示标志, 方便loader处理使用哪个@media查询

// index.css

/*v-4-3 标示*/

step5: loader读取每一个css文件, 尝试读取标识符

const regex = /(v-[\d]+-[\d]+)/
const type = regex.exec(source)
if (type === null) return source // 没有标识符, 不做处理
const item = arr.find(v => v.type === type)
if (item === null) return source// 没有对应的适配规则
return `${item.media} { ${source} }` // 包上媒体查询语句返回

以上就可以简单实现我们的方案了

采用根目录的类名来做适配

也可以直接在根目录上设置当前设备长宽比最近接近的类名, 然后去匹配对应规则

<app class="v-4-3">
   <child-component></child-component>
</app>

.v-4-3 p {
  ...
}

.v-2-1 p {
  ...
}

前面的v-x-y 也可以使用之前类似的方案用一个loader去动态添加

核心代码

// 配置 ratio.js
const ratios = [
  {
    value: 4/3,
    clazz: 'v-4-3'
  },
  {
    value: 1334/750,
    clazz: ''
  }
]

// 计算当前设备应该采用哪一个, 最接近的长宽比
export const calRatio = (docE) => {
  let w = docE.clientWidth
  let h = docE.clientHeight
  // h 会有可能为0吗 ?
  const r = w / h
  // 找到最接近的比例, 返回对应的class
  // 3个数的排序, 无需太多要求
  return ratios.sort((a, b) => {
    return Math.abs(a.value - r) - Math.abs(b.value - r)
  })[0].clazz
}

// App.vue
<div id="app" :class="ratio">
    ...
  </div>

created () {
    this.initRatio()
    window.addEventListener('resize', () => {
      this.initRatio()
    })
  },
  destroyed() {
    window.removeEventListener('resize', () => {
      this.initRatio()
    })
  },
  methods: {
    initRatio () {
      const doc = document.documentElement
      this.ratio = calRatio(doc)
    }
  }

// css 
<style scoped>
/* v-4-3 */
p {
  color: red;
}
</style>

<style scoped>
p {
  color: skyblue;
}
</style>

demo