苹果大屏展示项目适配问题总结

Posted on | In | | Visitors:

苹果大屏展示项目适配问题总结

一、布局篇

1） flex 方案：

布局统一使用 flex 进行布局。以首页为例。其中每一个Echats实例容器均通过 flex: 1 1 1px 的方式进行等比缩放方式

2） css3 方案：

部分布局使用 calc(100% - 10px) 方式做的弹性布局

二、 关于rem

1） rem使用场景
  1. 个人理解上，rem的使用场景仅是针对诸如一些button按钮之类的小元素展现而用。对于大的区块性元素则会在布局当中使用flex亦或百分比的方式设置其大小。
  2. 针对不同分辨率的屏幕设置不同大小根元素font-size。其所谓的兼容适配多个屏幕事实上在设计之初便是针对一个特定屏幕分辨率而做的，而对于其它不同分辨率的屏幕，只是做兼容处理。font-size 会有微调，但不大。这样造成视觉上的变化亦是那些button按钮这类的小元素微调上的些许变化。
2）PC端使用rem做兼容适配的建议
  1. 兼容适配屏幕的问题最初来源是高清屏的出现，也即dpr!=1的情况的出现。
  2. 由于手机端不同屏幕涌现，同时出现了多重设备独立像素与dpr值的屏幕。在此情况下如果元素大小依然使用固定的px，则会造成高清屏上元素变大（设备独立像素变小了）的情况。
  3. PC端关于屏幕dpr的数据暂无资料但应该都是1 吧
  4. 基本PC端用户可以及方便的缩放浏览器这一行为。建议是只在页面初始化时进行根元素font-size的计算。并不监控window.onresize来实时设置根元素font-size大小，若不然则会造成性能上的浪费
3）关于自适应我的思考，暂不建议做PC端的多屏幕适配
  1. PC端视窗大小与手机端视窗大小完全不是一个级别。 手机上之所以需做适配是因为在有限的视觉空间下，一个元素如果固定px大小，伴随着高清屏的出现（其独立像素变小了），则会造成元素占用空间变大。有限的设备视觉空间决定其要做适配。而pc端目前大多数均是1920的屏幕分辨率，在小就是1344的分辨率。无论是哪个我们都可以保证一个最小的单元（如button按钮）也能够清晰显示

  2. 浏览器适配是一个比较麻烦的事情。我们普通所做的仅是针对一些元素的大小适配，不包含字体的。在 使用Flexible实现手淘H5页面的终端适配 一文当中有这样一句话

    现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸

    即文字是不适合做rem适配的。详见上文。另外一点，我们可以保证 1344 分辨率下文字大小清晰可见，私以为这便可满足用户的需求了

  3. PC端兼容适配问题面临的问题还很多，苹果项目当中所做的比较简单粗暴。rem的使用我认为可以在实践当中做单位的统一使用，而不是适配，如此的话那就是另外一回事儿了。

三、 关于Echats图表

大屏展示当中因布局采用弹性布局，Echarts图表均做了自适应的处理。因图表较多。我写了一个 vue 的mixin宏。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const resizeMixin = {
  mounted() {
    setTimeout(() => {
      window.addEventListener('resize', this._windowResizeHandler)
    }, 21)
  },
  methods: {
    _windowResizeHandler() {
      throw new Error('_windowResizeHandler must be implement in current component')
    },
    _destroyEchart() {
      throw new Error('you must destroy your echatrs instance in current component!')
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this._windowResizeHandler)
    this._destroyEchart()
  }
}

四、大屏展示总结

  1. 布局上使用 flex 布局即可解决大部分问题。
    详见此处实例 大屏展示 。github地址 https://github.com/halfmoonvic/vue-big-screen
  2. 其它只是平时编码的一些注意事项，如模块话引入等等

常见需求

一、 错误处理机制

问题： 后台数据请求数据失败处理
处理： 页面显示样式，默认返回一组数据，或为空或是其它识别码，需保证组件正常流转下去

二、 数据更新方式

问题： 数据从后台获取更新后，前端页面是刷新页面显示最新的选择项，还是保留原因的选择项
处理： 传值判断处理，各种逻辑均需封装在函数当中

三、 样式兼容处理

  1. 单行文本显示样式不得折行，不可以固定宽度，宽度需自适应于文本宽度，可给定最小宽度，最大宽度按实际情况考虑
  2. 文本显示需考虑到不同选项文字数目不一样，需做最优化处理

四、 默认选项机制

  1. 未传参数： 未传参数情况默认返回第一项参数
  2. 第几项参数： 返回指定项参数
  3. 同时传递处多个参数
  4. 传出指定参数： 存储上次条件选项，待到数据更新变化时，遍历新的数据查找是否包含新数据，若含有前端显示上保留不变，另外选项当中默认激活项亦应显示正确