CSS使用高级技巧合集(六)

使用选择器:root来控制字体弹性

在响应式布局中，字体大小应需要根据不同的视口进行调整。你可以计算字体大小根据视口高度的字体大小和宽度，这时需要用到:root:

:root {

font-size: calc(1vw + 1vh + .5vmin);*

}

现在，您可以使用 root em

body {

font: 1rem/1.6 sans-serif;*

}

隐藏没有静音、自动播放的影片

这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：

video[autoplay]:not([muted]) {

display: none;*

}

再次，我们利用了 :not() 的优点。

为更好的移动体验，为表单元素设置字体大小

当触发的下拉列表时，为了避免表单元素在移动浏览器(IOS Safari 等等)上的缩放，加上font-size： input[type="text"], input[type="number"], select, textarea { font-size: 16px;* } :dancer:

使用指针事件來控制鼠标事件指针事件允許您指定鼠标如何与其触摸的元素进行交互。

要禁用按钮上的默认指针事件，例如： .button-disabled { opacity: .5;* pointer-events: none;* } 就这么简单。