REM 作为大众响应 css 站点答案

【问题标题】：REM as VW responsive css siteREM 作为大众响应 css 站点
【发布时间】：2014-11-25 10:41:48
【问题描述】：

我正在制作这样的东西：http://codepen.io/axlpl/pen/vEOyqL 但是当您调整浏览器的大小时，有时右侧的站点不在一行中，任何人都可以帮我解决这个问题吗？在 Sass 函数 vw 中获取 procent 的函数，第一个 arg "$size" 它的项目大小，这里我得到 1200px，第二个 arg 它的 "$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;
    }
}

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

【问题讨论】：

标签： jquery html css responsive-design viewport-units

【解决方案1】：

这可能是一个舍入问题。内部 div 元素的宽度为 16.666667% 并且对于某些断点，它们超过了父元素的宽度（即 33.333333%）；发生这种情况时，正如您所观察到的那样，第二个 div 会移动到第一个 div 之下

作为一种解决方法，您可以像这样简单地定义内部divs 的宽度

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

示例：http://codepen.io/anon/pen/emNgmb

【讨论】：