0

元の質問:

さて、これはプレーンでシンプルなcssです。しかし、私のサイトにバグがあり、それを取り除くことができません!

このデザインでサイトを作っています: http://cl.ly/image/1j231y2x3w07

このサイトは完全にレスポンシブで、css-aspect-ratio-technique を利用しています。

HTML:

<div class="post small">Post that is small</div>
<div class="post big">Post that is big</div>
<div class="post tall">Post that is tall</div>
<div class="post wide">Post that is wide</div>

CSS/LESS:

.post {position: relative;}
.post:after {display: block; content: '';}

.post.small {width: calc(1/4 * 100%);}
.post.small:after {padding-top: 70%;}

.post.big {width: calc(1/2 * 100%);}
.post.big:after {padding-top: 70%;}

.post.tall {width: calc(1/4 * 100%);}
.post.tall:after {padding-top: 140%;}

.post.wide {width: calc(1/2 * 100%);}
.post.wide:after {padding-top: 35%;}

あなたはそれの要点を得る。

また、フロートと位置を追跡するために、優れたプラグインPackery.jsも利用しています。私が主に使用するのは、サイズ変更とアニメーションのヘルパーです。

しかし、完全にレスポンシブであることは私に問題をもたらします。たとえば、ブラウザ ウィンドウの幅が1304pxの場合、上記の手法により、高さの値が奇数 (例: 477.4px) になります。奇数のため、デザインはおろか、グリッドを維持することもできません。

また、ウィンドウの幅が 4 で割り切れない場合は、オーバーラップまたは 1 ピクセルの白い線が表示されます。

私はかなり長い間これに取り組んできましたが、新鮮な目が必要です。ですから、誰かが解決策への意見を持っていれば、私はとても幸せです. ありがとう ：-）

ソリューション：

@ScottSに大いに感謝します–素晴らしいアドバイス！

function frontpageResize() {
    // container ... duh.
    var container = $('#frontpage-wrapper');
    // body width.
    var bWidth = window.innerWidth;
    // get the pixels missing for making bWidth divisible by 20.
    var divisibleBy =  bWidth % 20; 
    // setting an alternative width.    
    var altWidth = Math.ceil(bWidth - divisibleBy + 20);
    // what's missing?
    var leftover = altWidth - bWidth;

    // if body width is divisible by 20 all is peaches?     
    if(divisibleBy === 0) {
        container.width(bWidth);
    } else {
        // else set the alternative width as body width and set margin-left.
        container.width(altWidth).css({ "margin-left" : -leftover / 2 + "px"}); 
    }
    // relayout Packery.js
    container.packery();    
}
4

1 に答える 1

2

丸めの問題をすべて解消する唯一の方法

問題なく幅の 4 分割を取得するには、4widthで割り切れる合計が必要です。使用しているパーセンテージで高さの分割を取得するにはwidth、20 で割り切れる合計が必要です (20 の 35% = 7、素数; 1 ～ 19 の間に、分数を生成せずに 35% を掛けることができる値は他にありません)。

つまり、幅は100%ウィンドウの幅ではなく、次に小さい 20 で割った値である幅の値が必要です (そして、おそらくディスプレイを中央に配置して、残りの 0 から 9.5 ピクセルがmargin: 0 autoルールによってサイド マージンになるようにします)。 ）。

したがって、width値に必要な理論計算では、次のようなモジュラス関数を使用する必要があります。

@width - mod(@width, 20) //in LESS

また

width - (width%20) //in javascript

ただし、ご覧のとおり、要点は、ピクセル パーフェクトにするために、CSS がネイティブで使用できない動的アクションが必要になるということです。

于 2013-12-10T15:56:47.833 に答える