杂碎小点

1. 响应布局rem

750的设计稿，某div的宽度是50px，计算下这个div在375px设计稿下的实际的大小

a / 750 = x / 375

在不同的机型中，我们需要分别对应计算🤔️

幸运的是在 css3 中提出 rem，用来表示html根元素的 fontSize

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'

这样就可以适配不同机型

请注意 高能现场：

a / （750 / 100） = x / （375 / 100）

===> x = a / （750 / 100）* (1 * rem)

===> x = ((100 / 750) * a)rem

将基准值改下

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'

===> x = ((7.5 / 750) * a)rem

===> x = (a / 100)rem

其实就是数学问题😄

2. 用css实现顶部滑动条

效果

主要代码块1

body{
    background: linear-gradient(to top right, red 50%, #fff 50%);
    background-size: 100%;;
    background-repeat: no-repeat;
}

主要代码块2： 主要展示卡槽 以及遮挡多余部分

body::after{
  content: '';
  position: fixed;
  top: 5px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:rgba(0, 0, 0, 0.5);
  z-index: -1;
}

问题： 滑到底部，滑动条卡槽没有填充满，这是因为多了第一屏

解决：计算得出background-size纵向大小

body{
    background: linear-gradient(to top right, red 50%, #fff 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

完整代码查看：

body{
   background: linear-gradient(to top right, red 50%, #fff 50%);
   background-size: 100% calc(100% - 100vh + 5px);
   background-repeat: no-repeat;
   z-index: 1;
 }
 body::after{
   content: '';
    position: fixed;
    top: 5px;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: -1;
 }

Demo