Question

下面我有这段JS代码。当屏幕的分辨率在995px和1200px之间时，transform: translate的css动画应为22％。我怎么能这样做？

CSS代码：

.to_be_center {
        position: relative;
        transform: translate(-27%, 25%);
}

JS代码：

function resolution() {
    width = window.screen.availWidth;

    if ((width>=995) && (width<1200)){
        document.getElementsByClassName("to_be_center").style.transform= "translateX(14%)"; 
    }
}

resolution();

我在身体中调用该函数 - <body onload="resolution()">。

Answer 1

为什么不使用CSS媒体查询，并为该屏幕大小定义.to_be_center应该如何工作？

@media (max-width: 995px) {
  .to_be_center{
    /*your styles here*/
  }
}

可在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如何更改转换：根据屏幕分辨率翻译css规则？

1 个答案: