下面是这段JS代码。当屏幕分辨率在995px到1200px之间时，transform: translate的css动画应为22%。我该怎么做呢?
.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