0

960pxの12列グリッドレイアウトを中心に設計されたWebページを作成しています。各列の幅は最大60pxで、両側に最大10pxの余白があります。ページが縮小すると列が縮小するため、「最大」。今、私はそれをピクセルパーフェクトにするのに苦労しています。

私の「CSS」（実際にはCSSを生成するLESS）は次のようになります

.column{
    position: relative;
    float: left;
    margin: 100%*(10/960);
    &.c1{
        max-width: 60px;
        width: 100%*(60/960);
    }
    &.c2{
        max-width: 140px;
        width: 100%*(140/960);
    }
    &.c3{
        max-width: 220px;
        width: 100%*(220/960);
    }
    &.c4{
        max-width: 300px;
        width: 100%*(300/960);
    }
    &.c5{
        max-width: 380px;
        width: 100%*(380/960);
    }
    &.c6{
        max-width: 460px;
        width: 100%*(460/960);
    }
    &.c7{
        max-width: 540px;
        width: 100%*(540/960);
    }
    &.c8{
        max-width: 620px;
        width: 100%*(620/960);
    }
    &.c9{
        max-width: 700px;
        width: 100%*(700/960);
    }
    &.c10{
        max-width: 780px;
        width: 100%*(780/960);
    }

    &.c11{
        max-width: 860px;
        width: 100%*(860/960);
    }
    &.c12{
        max-width: 940px;
        width: 100%*(940/960);
    }
}

これで、1行に12列の幅を持つ1つの要素を持つページを作成しました。行2には、9列幅の1つの要素と3列幅の1つの要素があります。行3には、それぞれ3列幅の4つの要素があります。

以下はスクリーンショットです。ご覧のとおり、ピクセルが完全に整列しているわけではありません。理由がわからない... ピクセルパーフェクトではありません

4

1 に答える 1

0

あなたの問題は、ブラウザが丸めを行う方法が原因であると思います。場合によっては、余分なピクセルが得られることもあります。時々、ピクセルかそこらを見逃すことがあります。

于 2013-01-31T16:40:29.903 に答える