gpt4 book ai didi

javascript - 如何更改转换 :translate css rule according to the screen resolution?

转载 作者:行者123 更新时间:2023-11-28 04:51:45 25 4
gpt4 key购买 nike

下面我有这段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()"> .

最佳答案

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

关于javascript - 如何更改转换 :translate css rule according to the screen resolution?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40662927/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com