需要根据屏幕大小更改css的脚本

Question

我需要一个根据屏幕大小改变我的CSS的js。像这样：

var i;
i= 15;
j = 1930;
for(screen.width == j px){
    @margin-left:i%;
    i += 0.01;
    j++;
}

有人能帮助我吗？

Answer 1

而不是屏幕宽度的js我建议只使用Media Queries 例如，您可以在样式表中使用它：

@media (max-width: 600px) {
  .var_width {
    margin-left: 10%;
  }
}
@media (max-width: 1200px) {
  .var_width {
    margin-left: 20%;
  }
}

（显然没有细节，我无法给出代码来完全按照你的意愿）。

Answer 2

如果您定位现代浏览器，除了CSS媒体查询之外，您还可以使用window.matchMedia对JS中的媒体查询事件做出反应，并在必要时执行一些额外的工作。您可以在https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

找到更多示例