如何根据屏幕分辨率改变transform:translate css规则?

How do I change the transform:translate css rule according to the screen resolution?

本文关键字：translate css 规则 transform 改变 何根 屏幕 分辨率      更新时间：2023-09-26

下面是这段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 - <body onload="resolution()">中调用函数

为什么不直接使用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

相关文章：