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

Question

I need a js which changes my css based on screen size. Something like this:

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

Can someone help me out?

Answer 1

rather than js for screen width I'd suggest just using Media Queries So for example you would have this in your style sheet:

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

(obviously without details I can't give code to do exactly what you may want).

Answer 2

If you target modern browsers, in addition to CSS Media Queries you can use window.matchMedia to react to media query events in JS and do some extra work if necessary. You can find some more examples at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries