<main>
<section>
<h2>Sample Section</h2>
<p>
This card uses a relatively simple CSS calculation to rescale <code>margin</code>, <code>padding</code>, <code>font-size</code>, and <code>border-radius</code> between a minimum and maximum size based on screen width.
</p><p>
No LESS/SASS/SCSS rubbish, no NPM package trash, just flipping do it with <code>calc</code>, <code>min</code>, <code>max</code> and some native CSS variables.
</p>
</section>
</main>
* { margin:0; padding:0; }
body {
background:#DEF;
}
main {
overflow:auto;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
p {
margin:1.5em 0;
}
section *:last-child {
margin-bottom:0;
}
pre, code, samp, kbd {
font:normal 1em/1.2em consolas,monospace;
color:#084;
}
:root {
--base-scale:calc(100vw / 75);
--h2-font-size:max(1em, min(4em, calc(var(--base-scale) * 4)));
--padding-size:max(1em, min(2em, calc(var(--base-scale) * 2)));
--margin-size:max(0.5em, min(2em, calc(var(--base-scale) * 2)));
--border-radius:max(1em, min(3em, calc(var(--base-scale) * 3)));
}
main section {
max-width:40em;
padding:var(--padding-size);
margin:var(--margin-size);
border-radius:var(--border-radius);
background:#FFF;
border:1px solid #0484;
}
h2 {
font-size:var(--h2-font-size);
line-height:1.2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.