Responsive layouts - relative measure units (%, vw, vh)

Sept. 2, 2020

Front-End

Layout static

Zoom page to see the difference

Layout responsiv

Formula for setting relative units of measure (Ethan Marcotte):

target ÷ context = result

The source code is below and at github and jsbin.

css:

<style>

* {
  box-sizing: border-box;
}

no-float {
  clear: both;
}

.blue {
  background-color: #5197d5;
}
.yellow {
  background-color: #fdd72a;
}

aside,
section {
	margin-right: 15px;
}

.container-static {
	width: 1368px;
	height: 430px;
	padding: 15px;
	border: 1px solid black;
}

.container-responsiv {   /* for a resolution:  1920 x 1080: */
        width: 71vw;     /* 1368/1920 = 0.7125              */
        height: 39.81vh; /* 430/1080 = 0.398148148          */
        padding: 15px;
        border: 1px solid black;
}

.aside-static {
	width: 456px;
	height: 400px;
	float: left;
	background-color: yellow;
	border-radius: 10px;
}

.aside-responsiv {      /* target ÷ context = result */            
        width: 33.33%;  /* 456px ÷ 1368px = 0.3333   */
        height: 100%;   /* 400px ÷ 400px = 1         */
        float: left;
        background-color: yellow;
	border-radius: 10px;
}

.section-static {
	width: 456px; 
	height: 400px;
	float: left;
	background-color: blue;
	border-radius: 10px;
}

.section-responsiv {
        width: 33.33%;
        height: 100%;
        float: left;
        background-color: blue;
	border-radius: 10px;
}


</style>

html:

<h1>Layout static</h1>

<h2>Zoom page to see the difference</h2>

<div class="container-static">
  <aside class="aside-static">aside</aside>
  <section class="section-static">section</section>
</div>

<div class="no-float"></div>

<h1>Layout responsiv</h1>

<p>Formula for setting relative units of measure (Ethan Marcotte):</p>
<pre>
target ÷ context = result
</pre>

<div class="container-responsiv">
  <aside class="aside-responsiv blue">aside</aside>
  <section class="section-responsiv yellow">section</section>
</div>

Return to home