Question

我想更改下划线链接效果的高度以适应不同的视口，这是我的css。

a,a:visited,a:hover,a:active{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    position:relative;
    transition:0.5s color ease;
    text-decoration:none;
}
a.after:after{
    content: "";
    transition:0.5s all ease;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    position:absolute;
}
a.after:after{
    bottom:-0.03em;
    height:0.15em;
    width:0;
    background:#d73444;
}
a:after{
    left:50.3%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
a.after:hover:after{
    width: 100%;
}

所以我想以某种方式将a.after：after（高度）更改为不同的分辨率，有没有办法用css或jquery做到这一点，有没有什么库可以用来使其工作？

Answer 1

CSS3 media queries用于此确切目的。

例如，由于您要更改height中的a.after:after，因此可以执行以下操作：

@media (max-width: 400px){
    a.after:after {
      height: 1em;
   }
}

这将做什么，只要视口的宽度不大于400px，它将用括号内的样式替换该元素已经具有的任何当前样式。一旦大于400像素，这些样式将不再应用。

更改小型设备的：after元素的属性

1 个答案: