2011-07-05 20 views
3

定義済みの幅ではなくメディアクエリを使用して徐々にサイズを変更する方法はありますか?例えば。CSS Mediaクエリ - 段階的なサイズ変更?

現在、私のようなものがあります:ウィンドウはその魔法1024px境界に当たったとき今、これが唯一のサイズが変更されます

@media screen and (max-width: 1024px) { } 

は...しかし、私はそれがすべての段階だけでなく、1024pxのサイズを変更する必要があります。

ユーザーがウィンドウを10%狭くすると、イメージとフォントサイズも10%小さくする必要があります。

これはメディアクエリで可能ですか、それともJSルートを下ろす必要がありますか?

ありがとうございました。

+0

私はJSと一緒に行く必要があると信じています。あなたはCSS式でどこかに行くことができるかもしれませんが、それは理想的ではありません。 –

答えて

5

レイアウト全体を柔軟にするだけです。その後、幅:90%を使用して画像のサイズを変更できます。 (または好きな値)、またはmax-width:90%を使用します。画像を高画質にしたくない場合は、

メディアクエリーやCSSを使用して徐々にテキストのサイズを変更することはできませんが、実際には行わないでください。小さなウィンドウを持つ人はテキストを読むことができず、大きなスクリーンを持つ人々はテキストが大きくなるために座る必要があります。携帯電話を使っている人はもちろんのこと、

+0

しかし、フェアポイントは、ページ構造が維持されるように、ウィンドウのサイズ変更時にイメージやテキストを再スケーリングしませんか? – ABailiss

+0

私は、「反応性」と「柔軟性」のデザインが混在する傾向があります。私が現在取り組んでいるレイアウトの1つは、主なコンテンツに左右の固定マージンがあるため(ブラウザの幅に合わせて常にボックスの幅が変わります)、レイアウト全体が特定の幅の区切りで調整されますクエリ)。 – doubleJ