/********************************/
/* a few preferred global rules */
/********************************/
html,body {
box-sizing: border-box; /* use client+padding+border in calculations */
height: 100%; width: 100%; /* to fill full viewport */
margin: 0; /* getting rid of HTML spacing */
}
body { min-height: 100vh } /* to fill full viewport */
*::before,*::after,
* { box-sizing: inherit } /* take over parent setting */
/*
Responsive page padding using
Linear Equation y=mx+b for points p1(x1,y1) p2(x2,y2)
Reference
MathIsFun: Equation of a Straight Line
https://www.mathsisfun.com/equation_of_line.html
y = resulting size we need
m = (y2 - y1) / (x2 - x1),
fixed result 1
x = always one of 100vh/vw/vmin/vmax (VX in below CSS calc)
variable part of our equation, which makes our y change on browser resize
b = y1 - m * x1 and with m substituted: b = y1 - (y2 - y1) / (x2 - x1) * x1
fixed result 2
x1 - minimum viewport size
y1 - needed size at minimum viewport
x2 - maximum viewport size
y2 - needed size at maximum viewport
x1,y1,x2,y2 in pixel unit (can be any unit, provided you use the proper unit conversion)
CSS calc: calc(m * 100VX + b)
Final : calc(mVX + b) => multiply m with 100 to get rid of '* 100VX'
top/bottom padding: p1(320,32) p2(1920, 72) => y = 0.025x + 24 (vp height dependent)
left/right padding: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 (vp width dependent)
top/bottom padding:
m = (72 - 32) / (1920 - 320) = 40 / 1600 = 0.025
x = vp height dependent, so 100vh
b = 32 - 0.025 * 320 = 32 - 8 = 24
CSS calc = calc(0.025 * 100vh + 24px) => calc(2.5vh + 24px)
left/right padding:
m = (320 - 8) / (1920 - 320) = 312 / 1600 = 0.195
x = vp width dependent, so 100vw
b = 8 - 0.195 * 320 = 8 - 62.4 = -54.4
CSS calc = calc(0.195 * 100vw - 54.4px) => calc(19.5vw - 54.4px)
*/
.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) }
.halfTB { padding: calc((2.5vh + 24px)/2) calc(19.5vw - 54.4px) }
/* half height T/B padding, simply divide result of calc for T/B by 2 */
/* uncomment to constraint padding below 320, above 1920 *//*
@media screen and (max-width: 320px) { .padded { padding: 32px 8px } }
@media screen and (min-width:1920px) { .padded { padding: 72px 320px } }
/* probably not really needed, just to be complete */
/* Extra: responsive base font size: y = 0.00625x + 12 */
/* points p1(320,14) p2(1280,20) vp independent where 0.75rem = 12/16 */
body { font-size: calc(0.625vmin + 0.75rem); line-height: 1.3333 } /* use root fontsize */
:root,html { font-size: 100% } /* use browser default fontsize (from browser user settings) */
.child1wide { width: 100% } /* width is restricted by L/R .padded, centered automatically */
.container { width: 66.667%; margin: 0 auto } /* width restricted by percent%, centered by margin */
<h1 class="padded halfTB">calculated padding versus percentage<br>resize the browser to see the effect</h1>
<h3 class="padded halfTB">normally you would use ".padded" on some main container, now split to show difference</h3>
<div class="child1wide padded">
<h2>padding with Linear Equation</h2>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
<p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
est. Mel ex oporteat consectetuer.</p>
<p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>
<div class="container">
<h2>width 66.667%, margin: 0 auto</h2>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
<p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
est. Mel ex oporteat consectetuer.</p>
<p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>
