0

独自のアプリ/ポータルの束用のグリッド システムを作成しています。基本的なグリッド幅とガターなどが配置されています。しかし、グリッドを少しレスポンシブにすることを検討しています。それを考慮して、私たちはエラスティック グリッド システムを作りたかったのです。Ethan Marcotte はレスポンシブ デザインの基本を彼の著書できちんと書き留めていますが、ブラウザでのこのアプローチの効果について話すことは考えていません... ため息..

私が調査した限りでは、パーセンテージ幅 (流動的/伸縮性のあるレイアウトに不可欠) は、Opera + Safari にとって大きな問題でした。これは Opera でよく見られるバグであり、Opera + safari ではフルイド 960gs でさえ欠陥があります。

パーセンテージ幅が機能している唯一の場所は YUI2 でした。Opera / Safari でパーセンテージ幅を機能させる方法の詳細に興味のある YUI 開発者はいますか??

これは経験豊富な開発者とグリッド クリエーター向けの SOS であり、ブラウザー間でこのようなことを機能させるための回避策/ソリューションについてアドバイス/ガイドすることができます。

ありがとうございます！サンジェイ

4

2 に答える 2

1

「レスポンシブ レイアウト」とはどういう意味かわかりませんが、流動的な幅に関するものであれば、答えは 1 つです。OOCSS グリッド。

ここでは、行と単位 (列) にマージンとパディングを設定できないことを覚えておく必要があります。内部要素はそれらを持つことができます。「オブジェクト指向CSS」とは、1つのHTMLタグで複数のクラスを使用してクラスを作成できるアイデアです。

.inner{
    margin:16px; /* or whatever CSS size you like */ 
}

次のような行または列のすべての直接の子に適用します。

<div class="myContent inner"/>

行を行にネストできますが、列を列にネストすることはできません。

.wfull{
    width:100%;
    background:orange;
}
.w950{
    width:950px;
}
<div class="line wfull">
    <div class="line w950"/>
</div>

OOCSS のより複雑な作業例を見たい場合 (グリッドをかなり強化し、名前を変更しました: line->container、unit->column、size1of2->half など):

asynccode.com

ここに、私の機能強化に関する (まだ完成していない) ドキュメントがあります。

docs.asyncode.com/text/RichML-reference

OOCSS は舞台裏で動作しますが、名前は 1:1 で HTML にコピーされるため、それが何であるかがわかります。

多くのブラウザーで OOCSS をテストしましたが、それを処理できないブラウザーは 1 つもありませんでした。これは、Nicole Sullivan が発見または発明した非常に厄介な CSS ハックのおかげで可能になりました - 家で試してはいけません :)。

于 2011-07-18T21:08:48.713 に答える
0

これはその上であなたを助けるかもしれないと思います。http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

于 2011-07-12T10:05:24.260 に答える