How do I make a responsive margin which grows larger for larger screen sizes?
Question
I want a margin which will be close to 0% on small screen sizes and around 20% on large ones without using @media queries to force specific numbers for all specific screen sizes.
What I am imagining is some math equation that will turn a number like 300 (300px) to 0 (0%) and a number like 2000 (2000px) to 20 (20%)? However, I am no math genius so I am asking for your help please.
Currently I am using margin: 0 10%; which is an alright compromise, however, I still find that the margin is far to large on small screen sizes and far to small on large screen sizes
:root { --page-margin: 10%; } body { margin: 0; background-color: skyblue; } div { background-color: grey; height: 100vh; margin: 0 var(--page-margin); }
<div></div>
1 answers
solution1
2 ACCPTED 2022-07-11 17:39:13
I would use the CSS clamp() function. Set the minimum to 0 and the max to 20vw (equals 20% width of the viewport). Then calculate the average value with the max value - a certain pixel value (play around with it):
:root { --page-margin: 10%; } body { margin: 0; background-color: skyblue; } div { background-color: grey; height: 100vh; margin: 0 clamp(0vw, 20vw - 100px ,20vw); }
<div></div>
solution2
-1 2022-07-11 17:48:37
Can't we accomplish this with a regular @media rule?
This is an example from w3schools.com
You can define endless rules with this, based on the screen resolution and other conditions.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-6"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> </div> <div class="col-3 right"> <div class="aside"> <h2>What?</h2> <p>Chania is a city on the island of Crete.</p> <h2>Where?</h2> <p>Crete is a Greek island in the Mediterranean Sea.</p> <h2>How?</h2> <p>You can reach Chania airport from all over Europe.</p> </div> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.