Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<title>viewport units rounding reference</title>
<meta charset="UTF-8">
<style>
div.contain { height: 50px }
div.contain > div { height: 10px }
div.contain > div > div { height: 10px; float: left }
</style>
<div class="contain" style="width: 200px">
<div>
<div style="width: 50px; background: fuchsia"></div>
<div style="width: 50px; background: aqua"></div>
<div style="width: 50px; background: silver"></div>
<div style="width: 50px; background: yellow"></div>
</div>
<div>
<div style="width: 48px; background: fuchsia"></div>
<div style="width: 48px; background: aqua"></div>
<div style="width: 48px; background: silver"></div>
<div style="width: 48px; background: yellow"></div>
<div style="width: 8px; background: gray"></div>
</div>
<div>
<div style="width: 42px; background: fuchsia"></div>
<div style="width: 42px; background: aqua"></div>
<div style="width: 42px; background: silver"></div>
<div style="width: 42px; background: yellow"></div>
<div style="width: 32px; background: gray"></div>
</div>
</div>
<div class="contain" style="width: 201px">
<div>
<div style="width: 50px; background: fuchsia"></div>
<div style="width: 51px; background: aqua"></div>
<div style="width: 50px; background: silver"></div>
<div style="width: 50px; background: yellow"></div>
</div>
<div>
<div style="width: 48px; background: fuchsia"></div>
<div style="width: 48px; background: aqua"></div>
<div style="width: 49px; background: silver"></div>
<div style="width: 48px; background: yellow"></div>
<div style="width: 8px; background: gray"></div>
</div>
<div>
<div style="width: 42px; background: fuchsia"></div>
<div style="width: 42px; background: aqua"></div>
<div style="width: 43px; background: silver"></div>
<div style="width: 42px; background: yellow"></div>
<div style="width: 32px; background: gray"></div>
</div>
</div>
<div class="contain" style="width: 202px">
<div>
<div style="width: 51px; background: fuchsia"></div>
<div style="width: 50px; background: aqua"></div>
<div style="width: 51px; background: silver"></div>
<div style="width: 50px; background: yellow"></div>
</div>
<div>
<div style="width: 48px; background: fuchsia"></div>
<div style="width: 49px; background: aqua"></div>
<div style="width: 48px; background: silver"></div>
<div style="width: 49px; background: yellow"></div>
<div style="width: 8px; background: gray"></div>
</div>
<div>
<div style="width: 42px; background: fuchsia"></div>
<div style="width: 43px; background: aqua"></div>
<div style="width: 42px; background: silver"></div>
<div style="width: 43px; background: yellow"></div>
<div style="width: 32px; background: gray"></div>
</div>
</div>
<div class="contain" style="width: 203px">
<div>
<div style="width: 51px; background: fuchsia"></div>
<div style="width: 51px; background: aqua"></div>
<div style="width: 50px; background: silver"></div>
<div style="width: 51px; background: yellow"></div>
</div>
<div>
<div style="width: 49px; background: fuchsia"></div>
<div style="width: 48px; background: aqua"></div>
<div style="width: 49px; background: silver"></div>
<div style="width: 49px; background: yellow"></div>
<div style="width: 8px; background: gray"></div>
</div>
<div>
<div style="width: 43px; background: fuchsia"></div>
<div style="width: 42px; background: aqua"></div>
<div style="width: 43px; background: silver"></div>
<div style="width: 42px; background: yellow"></div>
<div style="width: 33px; background: gray"></div>
</div>
</div>
<div class="contain" style="width: 204px">
<div>
<div style="width: 51px; background: fuchsia"></div>
<div style="width: 51px; background: aqua"></div>
<div style="width: 51px; background: silver"></div>
<div style="width: 51px; background: yellow"></div>
</div>
<div>
<div style="width: 49px; background: fuchsia"></div>
<div style="width: 49px; background: aqua"></div>
<div style="width: 49px; background: silver"></div>
<div style="width: 49px; background: yellow"></div>
<div style="width: 8px; background: gray"></div>
</div>
<div>
<div style="width: 43px; background: fuchsia"></div>
<div style="width: 43px; background: aqua"></div>
<div style="width: 43px; background: silver"></div>
<div style="width: 42px; background: yellow"></div>
<div style="width: 33px; background: gray"></div>
</div>
</div>