REM as VW отзывчивый сайт css

Question

Im делает что-то вроде этого: http://codepen.io/axlpl/pen/vEOyqL , но при изменении размера браузера иногда правильный сайт находится под левым не в одной строке, может ли кто-нибудь помочь мне исправить эту проблему? в функции Sass vw его функция, чтобы получить procent, сначала arg «$ size» его размер проекта, здесь я получил 1200px, второй аргумент «$ target» его размер элемента в примере в размере проекта 1200px мы получили оболочку элемента с размером 400px;

HTML

<div class="wrapper"> 
    <div class="left--green"></div> 
    <div class="right"> 
     <div class="block--red"></div> 
     <div class="block--black"></div> 
     <div class="block--blue"></div> 
     <div class="block--yellow"></div> 
    </div> 
</div> 

SASS

@function vw($size, $target) { 
    $vw: $size/100; 
    @return ($target/$vw) * 1rem; 
} 


.wrapper { 
    width: vw(1200, 400); 
    height: vw(1200, 200); 
    float: left; 
} 

.left, 
.right { 
    width: vw(1200, 200); 
    height: vw(1200, 200); 
    float: left; 
    display: block; 

    &--green { 
     @extend .right; 
     background: green; 
    } 
} 

.block { 
    height: vw(1200, 100); 
    width: vw(1200, 100); 
    float: left; 

    &--red { 
     @extend .block; 
     background: red; 
    } 

    &--blue { 
     @extend .block; 
     background: blue; 
    } 

    &--yellow { 
     @extend .block; 
     background: yellow; 
    } 

    &--black { 
     @extend .block; 
     background: black; 
    } 
} 

JS

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

function updateVw(){ 
    var vw = (viewport().width/100); 
    if(vw % 2) { 
     console.log('tak'); 
    } else { 
     console.log('nie'); 
    } 
    jQuery('html').css({ 
     'font-size' : vw + 'px' 
    }); 
} 

updateVw(); 

jQuery(window).resize(function(){ 
    updateVw(); 
}); 

Answer 1

Это, вероятно, округление проблема. Ширина ваших внутренних элементов div равна 16.666667%, а для некоторых точек останова они превышают ширину родительского элемента (который равен 33.333333%); когда это происходит, как вы наблюдали, второй ДИВ сдвигается под первой

В качестве временного решения можно просто определить ширину внутренних div х как так

.left--green, right { 
    width: 50%; 
} 

Пример: http://codepen.io/anon/pen/emNgmb