实现首字下沉
p.texts:first-letter {
font-size: 200%;
color: #8A2BE2;
}
阻止鼠标选择文本
.no-select { user-select: none }
响应式文字大小
.responsive-text { font-size: clamp(1rem, 2.5vw, 2rem) }
clamp(minimum size, preferred size, maximum size)
// minimum size:小屏是最小字体大小
// preferred size:首选大小,其中vw代表视口宽度,2.5vw表示字体大小将是视口宽度的2.5%
// maximum size: 最大字体大小
禁止鼠标事件触发
.no-pointer { pointer-events: none }
模糊背景或者元素
.blur { filter: blur(20px) }
响应式屏幕方向
@media (orientation: landscape) {
body {
background-color: #333
}
}