viewport-units-rounding-1-frame.html (1343B)
1 <!DOCTYPE HTML> 2 <title>subframe for test of viewport units rounding</title> 3 <meta charset="UTF-8"> 4 <style> 5 6 html, body { margin: 0; padding: 0; border: none } 7 8 body > div { 9 background: red; /* should never show */ 10 overflow: hidden; /* block formatting context */ 11 } 12 13 body > div > div { 14 float: left; 15 height: 10px; 16 } 17 18 body > div.w25 > div { width: 25vw; } 19 20 </style> 21 22 <div class="w25"> 23 <div style="background: fuchsia"></div> 24 <div style="background: aqua"></div> 25 <div style="background: silver"></div> 26 <div style="background: yellow"></div> 27 </div> 28 29 <!-- 30 Really, though, anything that is a multiple of 5vw will always 31 produce a round number of appunits when starting from an integer 32 number of pixels, since 5vw is 1/20 of the viewport. 33 34 So, more interesting: 35 --> 36 37 <div> 38 <div style="width: 24vw; background: fuchsia"></div> 39 <div style="width: 24vw; background: aqua"></div> 40 <div style="width: 24vw; background: silver"></div> 41 <div style="width: 24vw; background: yellow"></div> 42 <div style="width: 4vw; background: gray"></div> 43 </div> 44 45 <div> 46 <div style="width: 21vw; background: fuchsia"></div> 47 <div style="width: 21vw; background: aqua"></div> 48 <div style="width: 21vw; background: silver"></div> 49 <div style="width: 21vw; background: yellow"></div> 50 <div style="width: 16vw; background: gray"></div> 51 </div>