Ways to change margin by screen size

Question

How I can set this CSS margin:

.url {
    margin: 10px 0 0;
}

When screen is resized? From margin: 10px 0 0; to margin: 20px 0;

Answer 1

you have Several option:

1:Responsive Option:

media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

@media all and (max-width: 1000px) and (min-width: 700px) {
  .class {
   margin:50px;
  }
}

---

2:Using Percentage: you can use:

.class{
margin:40%;
}

resource:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/