HTML
16
1
<div class="container">2
<p class="viewport">Viewport width: <span class="c-viewport__width" id="vpWidth"></span>px3
</p>4
<div class="flex-wrapper">5
<div class="element main">6
<h2>Main</h2>7
<p>Gingerbread soufflé brownie pie marzipan. Gummies pie pudding icing chocolate cake apple pie chocolate bar. Sweet marzipan powder lollipop gummi bears chupa chups jelly beans marshmallow. Tootsie roll chocolate cake marshmallow. Sesame snaps pastry cotton candy tart applicake. Candy lemon drops cheesecake jelly cake jelly beans oat cake biscuit.</p>8
<p>Apple pie cupcake wafer pie ice cream sugar plum caramels tart brownie. Chocolate cake cotton candy tiramisu lollipop. Carrot cake biscuit wafer jelly soufflé sesame snaps gummi bears.</p> 9
</div>10
11
<div class="element sidebar">12
<h2>Sidebar</h2>13
<p>Pudding bear claw chocolate cake gingerbread candy bear claw jelly wafer applicake. Candy jelly beans lollipop tootsie roll applicake lemon drops. Croissant croissant cupcake chupa chups sweet applicake cheesecake biscuit cotton candy.</p>14
</div>15
</div>16
</div>CSS
57
1
html {2
box-sizing: border-box;3
}4
5
*,6
*::before,7
*::after {8
box-sizing: inherit;9
}10
11
body {12
background: #f1f1f1;13
font-size: 1.1em;14
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;15
}16
17
.container {18
margin: 2em auto;19
max-width: 45em;20
border: 1px solid #aaa;21
padding: 1em;22
}23
24
.container::after {25
display: block;26
clear: both;27
content: '';28
}29
30
.element {31
padding: 1em;32
background-color: white;33
}34
35
.viewport {36
position: absolute;37
font-size: 75%;38
padding: 5px;39
color: grey;40
background: white;41
top: 0;42
left: calc(50% - 70px);43
border-radius: 11px;44
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);45
}46
47
@media (min-width: 35em) {48
.main {49
width: 67%;50
float: left;51
}52
53
.sidebar {54
width: 33%;55
float: right;56
}57
}JS
8
1
var getViewportWidth = function() {2
var windowWidth = window.innerWidth;3
var widthValue = document.getElementById('vpWidth');4
widthValue.innerHTML = windowWidth;5
}6
getViewportWidth();7
window.addEventListener("resize", getViewportWidth);8