快速響應作爲VW響應css站點

我做這樣的事情：http://codepen.io/axlpl/pen/vEOyqL 但是當你調整瀏覽器有時正確的網站是左下不在一行，任何人可以幫我解決這個問題？在Sass函數vw中它的函數獲得procent，第一個arg「$ size」它的項目大小，這裏我得到了1200px，第二個arg它的「$ target」它的元素大小爲，在項目大小爲1200px的例子中我們得到了400px大小的元素包裝;快速響應作爲VW響應css站點

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; 
    } 
}

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(); 
});

來源

2014-11-25 axlpl

這可能是一個四捨五入的問題。內部div元素的寬度爲16.666667%，對於某些斷點，它們超出父級的寬度（即33.333333%）;當發生這種情況，因爲你已經觀察到的，第二個div是根據第一個

偏移作爲一種變通方法，你可以簡單地限定內div S的寬度，像這樣

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

實施例：http://codepen.io/anon/pen/emNgmb

來源

2014-11-25 10:50:04 fcalderan

快速響應作爲VW響應css站點

回答

相關問題