web-dev-qa-db-ja.com

混合パーセントと固定CSS

これはUI.StackExchange.comからの複製です：
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

パーセンテージと固定CSSを一緒に適用する必要がありますか？問題が発生しますか？その場合、どのような問題がありますか？

  • 混合するとブラウザのレンダリングパフォーマンスが低下しますか？
  • ミキシングにより、プログレッシブレンダリングブラウザーを使用した初期ロードで奇妙な結果が得られますか？

以下は、単純な混合使用の例ですが、どのような混合でもかまいません。 私は例の検証を探していません。私は以下の例で私がしていることを決してすべきではないと聞いたので、私は見つけようとしていますこの方法でCSSを使用することが問題である場合。

ミックスの使用例：

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>
cssperformancebrowserrenderingcross-browser
37
rick schott

+1良い質問です。この記事をご覧になることをお勧めします。 " Fixed-width、liquid、and elastic layout "これは、固定幅レイアウト（em）とエラスティックレイアウト（％）を超えます。次のページに移動すると、「弾性液体ハイブリッド」が表示されます。ここで、width：は一方の方向に、max-width：は一方の方向に設定されています。上記にリンクされている記事は、あなたが尋ねたものと正確ではないが、それは単一のCSSスタイル内での混合使用の例です。

編集：さらに読んだ後、私はこの主題についてかなりの数の矛盾した意見を見つけました。 「 ピクセルとパーセンテージを混同することはできない 」という考えを抱いた記事をいくつか見つけました。ただし、ほとんどの場合、これらのサイトはかなり古くなっています。過去1年に掲載された記事だけに絞ってみたところ、少し状況が変わった。ミキシングに対する意見はまだいくつかありましたが、通常は理由が説明されておらず、「私はいつもそれは悪い考えだと聞いていました」と思われていました。私がトピックで見つけたより最近の情報の大部分は、固定幅とパーセンテージを混ぜることは、結果を理解して行われる限り、完全に許容できる慣行であることを示しているようです。

見る：

完全な開示：私は長年ミキサーであり、自分のアプローチが「正しい」かどうかを本当に知ることはありませんでした。

34
S.Jones

これは、パーセントとピクセルを混ぜても問題がない場合とそうでない場合の区別に役立ちます。

例のようにパーセント幅とピクセル幅を混ぜても問題はありません。

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

問題になるのは、順序を逆にしたときです。

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

この場合、ブラウザウィンドウ（または.containerの親）が1000px未満の場合、.containerの25％は250px未満になり、.cellがオーバーフローします.container。

また、幅とパディングの場合にパーセントとピクセルを混在させると問題になります。

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

これにより、.cellの幅が320px（100％+ 10px + 10px）になり、.containerがオーバーフローします。

それで問題が解決するかどうかをお知らせください。

5
Jo Sprague

あなたがそれを持っている方法は結構です。各セルは75pxに計算されます。パーセンテージに注意する必要があるのは、丸めがキックするときだけです。

あなたの例では、コンテナが303pxの場合、各セルは75.66666pxに評価され、76pxに切り上げられ、合計304pxになるため、コンテナより大きくなります。その1ピクセルはあらゆる種類の問題を引き起こします。

4
mikemerce

私が行った調査から、CSS（id、class、universal ...など）をどのようにターゲットにするかがブラウザのレンダリングパフォーマンスで最も重要であるように見えます。

CSSを効率的にレンダリング

Mozilla UIで使用するための効率的なCSSの記述

ブラウザのレンダリングを最適化

2
rick schott

これを証明するためのテストケースを含む証拠の文書は見つかりません。これについて読んだ場所を教えていただけますか？

私は2つを混合することは非常に便利であると思います、そしてそれは評判の高い/トラフィックの多いサイトでも実際に多く見かけます。

古いブラウザとIEに主に影響する唯一の問題は丸めです。ここを読んでください：

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

1
Moin Zaman