大屏

发表于 | | 阅读次数:
字数统计: 390

拼接屏幕

设施：拼接屏组成大屏
特点：

  1. 屏幕缝隙（常用的有无缝隙、1.7mm缝隙、3.5mm缝隙，缝隙越小价格越贵），设计原型时，使关键图像避开缝隙
  2. 分块展示数据
  3. 常据屏幕大小，固定尺寸（无需自适应）
  4. 大屏信号源电脑屏幕的分辨率 （主流分辨率 16：9 或 4：3）
    • 大屏逻辑分辨率（设计稿尺寸）
    • 显卡输出分辨率
    • 视频矩阵切换器（ DVI ）支持分辨率
    • 大屏实际物理分辨率

样式

  1. 深色调
  2. 整体页不能有滚动条
  3. 字号：
    • 普通字体：14号以上
    • 标注信息：12号以上

布局

  1. grid/flex布局
  2. 100%
  3. rem
    相对于根元素html（或 :root ）设置大小
  4. em
    相对于元素自身font-size的大小（若没有对元素显式使用绝对单位声明font-size，则元素font-size属性自动继承自父元素）
  5. vh / vw
  6. px
    绝对单位
  7. @media
常见用途 单位
字体 rem
boder px
padding/margin em
宽度 百分比 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
  font-size: 0.75em;
}

@media (min-width: 800px) {
  html {
    font-size: 0.875em;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 1em;
  }
}

参考：
CSS in Depth
为什么要使用em和rem

常用实现

分割数字

1
2
3
function split(num) {
	return (num || 0).toString().split('');
}

增加千分位

1
2
3
4
function format (num) {  
    var reg=/\d{1,3}(?=(\d{3})+$)/g;   
    return (num + '').replace(reg, '$&,');  
}

参考链接

  1. JS实现千分位
  2. 可能是最详细的大屏数据可视化设计指南
-------------Keep It Simple Stupid-------------
0%