Increase percentage of margins as viewport width widens-CodePudding

How can I increase the percentage of margins as the viewport width also increase? For example if the screen is 1600px wide, the margins are set to 1% and when the screen is 2100px and above the margins are 10%.

How do I set this in CSS?

CodePudding user response：

Here is a working example of what you are looking for: https://codepen.io/colinah/pen/VwQombR

The Idea is to use a media query to tell if the device is larger than 1600px then set the margin to 10vw

body{
  margin: 1vw
}
@media(min-width:1600px){
  body {
    margin: 10vw
  }
}

CodePudding user response：

.wrapper{
  border: 1 px solid black;
  background: blue;
}
.my-list {
  border: 1 px solid;
}
.my-list {
  background: red;
}
/* On screens that are 1600px wide or more, make margin 1%; */
@media screen and (max-width: 1600px) {
  .my-list {
    margin: 1%;
  }
}

/* On screens that are 1600px wide or more, make margin 1%; */
@media screen and (min-width: 1600px) and (max-width: 1700px){
  .my-list {
    margin: 1%;
  }
}
/* On screens that are 1700px wide or more, make margin 3%; */
@media screen and (min-width: 1700px)  and (max-width: 1800px){
  .my-list {
    margin: 3%;
  }
}
/* On screens that are 1800px wide or more, make margin 4%; */
@media screen and (min-width: 1800px)  and (max-width: 1900px){
  .my-list {
    margin: 4%;
  }
}
/* On screens that are 1900px wide or more, make margin 6%; */
@media screen and (min-width: 1900px)  and (max-width: 2000px){
  .my-list {
    margin: 6%;
  }
}
/* On screens that are 2000px wide or more, make margin 8%; */
@media screen and (min-width: 2000px)  and (max-width: 2100px){
  .my-list {
    margin: 8%;
  }
}
/* On screens that are 2100px wide or more, make margin:10%; */
@media screen and (min-width: 2100px) {
  .my-list {
    margin: 10%;
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<div >
  <div >
    test message
  </div>
</div>

</body>
</html>