大屏

页面

• 设计图
• CMP

思路

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

一、1. 分列、分行

1. 分列方法

• grid
• flex
• multiple columns

1. 列间距

• grid-gap
• margin
  需要去除两头的margin，或者通过css选择器不给两头元素添加margin。
  注：flex布局不存在margin collapse
• column-gap

1. 块对齐

• flex
• calc
  左右高度一致

二、calc与scss计算

calc与scss计算

scss:

• 加减
  绝对单位：px, pt, pc, in, mm, cm…绝对单位都能运算；
  相对单位：ex, em, rem…相对当前字体的都不能运算；

❌ 🌰

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

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

✔️ 🌰

$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;
}

• 乘
  相乘的变量或者数字只能一个带单位。不允许不同单位相乘。

div {
  width: 10px * 20px; //error:  isn't a valid CSS value
}

• 除

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

参考：font ‘/‘

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

calc

尽情计算

三、 自动全屏

1. 理想实现效果
   点击总览页按钮，新开tab，进入大屏页并自动全屏展示
2. 实现后效果
3. 全屏api

• requestFullScreen()
• exitFullscreen()
• fullScreenChange()
  最初想法： 监听ESC按键, 在回调函数里执行跳转操作。
  最终实现：在大屏组件内监听fullScreenChange事件，并在unmount周期移除, fullScreenChange时判断是否在全屏模式，全屏就browserHistory.push到总览页