大屏

页面

  • 设计图
  • CMP

思路

  1. 分为左、中、右三块
  2. 寻找布局相似点
  3. 实现界面
  4. 自动全屏

一、1. 分列、分行

  1. 分列方法
  • grid
  • flex
  • multiple columns
  1. 列间距
  • grid-gap
  • margin

    需要去除两头的margin，或者通过css选择器不给两头元素添加margin。

    注：flex布局不存在margin collapse
  • column-gap
  1. 块对齐

二、calc与scss计算

calc与scss计算

scss:
  • 加减

    绝对单位：px, pt, pc, in, mm, cm…绝对单位都能运算；

    相对单位：ex, em, rem…相对当前字体的都不能运算；

❌ 🌰

1
2
3
4
5
6
$plus1: 100px + 20ex; //不能换算的编译都会报错;
$plus2: 100px + 20em;
$plus3: 100px + 20rem;
.plus{
    width: $plus1 + 10px; //在变量或属性中均可做加减法运算;
}

报错： Incompatible units: 'ex' and 'px'.

✔️ 🌰

1
2
3
4
5
6
7
8
9
10
11
12
13
$minus1: 100px - 20; //第二个值可不带单位；
$minus2: 100pt - 20px; //运算是从左到右，如第二个值的单位不同于第一个值的单位(pt)，
$minus3: 100px + 20cm; //将会对其进行转换(pt)后再运算；编译出来的值的单位也是(pt);
$minus4: 100rem; //可以正常编译输出;
$minus5: 100rem + 10em; //报错;--Incompatible（不相容） units: 'em' and 'rem'.);
.minus{
    width: $minus1;
    height: $minus1 + 30; //在属性还可以继续做运算；
    min-width: $minus2;
    min-height: $minus3;
    max-width: $minus4;
    max-height: $minus1 + $minus2;
}
  • 乘

    相乘的变量或者数字只能一个带单位。不允许不同单位相乘。
1
2
3
div {
  width: 10px * 20px; //error:  isn't a valid CSS value
}
  • 除

css中允许使用/分隔数值，所以仅有/分隔没有运算时，不会当作除法运算，会原样输出。

参考：font ‘/‘

1
2
3
4
div {
  font: 20px / 2px; //原样输出到css
  font: (20px / 2px); // 10px;
}

calc

尽情计算

三、 自动全屏

  1. 理想实现效果

    点击总览页按钮，新开tab，进入大屏页并自动全屏展示
  2. 实现后效果
  3. 全屏api
  • requestFullScreen()
  • exitFullscreen()
  • fullScreenChange()

    最初想法： 监听ESC按键, 在回调函数里执行跳转操作。

    最终实现：在大屏组件内监听fullScreenChange事件，并在unmount周期移除, fullScreenChange时判断是否在全屏模式，全屏就browserHistory.push到总览页