需要根據屏幕大小更改 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 (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找到更多示例