一些CSS知识点备忘

RGBA指的是“红色、绿色、蓝色和Alpha透明度”（Red-Green-Blue-Alpha）。

HSLA代表“色调、饱和度、亮度和Alpha透明度”（Hue-Saturation-Lightness-Alpha）。

CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。（相当于window.addEventListener('touchmove', func, { passive: false })）

scroll-behavior:smooth;  //使页面的滚动变顺滑

 

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .class{}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
    .class{}
}

隐藏滚动条

.scroller::-webkit-scrollbar{
  display: none;
}

改变滚动条样式

.rule-text::-webkit-scrollbar-track-piece {   //前面的就是滚动容器的class名
    background-color: rgba(0, 0, 0, 0);
    border-left: 1px solid rgba(0, 0, 0, 0);
    border-radius: 10px;
  }
  .rule-text::-webkit-scrollbar{
    width: 5px;
    height: 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .rule-text::-webkit-scrollbar-thumb{
    background-color: #ffd319;
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 28px;
  }