搞事情

大屏、PC 端、移动端

大纲
  1. 1. 前言
  2. 2. 大屏
  3. 3. PC 端
  4. 4. 移动端

前言

果然前端一个主要任务就是应对不同的设备、操作系统和浏览器。最近一直在做要大屏展示的事,来了个 PC 端的活顺势就用大屏的方式去做了,快下班了仔细一想真是蠢爆了。

大屏

以我的经验大屏一般指固定了比例(甚至固定了尺寸的)屏幕,一般这种屏比较大,设计图最小也得是 1920*1080 的。开发这种用在大屏的系统在处理屏幕尺寸适配上是很简单的,但这种系统一般花里胡哨的写各种炫酷的样式和特效比较复杂。

用在大屏的系统一般只要完美按照设计图还原就行,这种情况只要做个复读鸡直接把设计图的尺寸复制粘贴过来就好了。

如果需要固定为设计图的比例缩放到窗口大小的话可以考虑下面几种方法:

  1. 用脚本将完美按照设计图还原的页面用 transform 缩放(注意:图片、Canvas 放大会模糊)。
  2. 全部长度单位用 vw(这种方式要注意 Chrome 最小字体大小为 12px,这个需要去 Chrome 设置-外观里面设置)。
  3. 全部长度单位用 rem,用脚本改变根元素font-size(同样要注意最小字体大小)

如果系统既想用在大屏又想支持响应式就要具体问题具体考虑了。总得来说比较难搞,因为针对大屏的设计一般不能滚动并且内容比较满。

一般会有人过来问以下问题:

PC 端

移动端