0

要素のサイズを動的にページのサイズに変更する方法を探しています。
私はそれがjavascriptで可能であることを知っています。:-)
しかし、CSS ユニットを使用した新しいソリューションもあります: vw、vh、vmin、およびvmax。これらの単位はビューポートに相対的であり、非常にうまく機能します。1つだけ問題があります。私のページには最小サイズが必要です。したがって、依存要素に最小サイズを与えるために、ビューポートの最小サイズも設定する必要があります。残念ながら、その解決策は見つかりませんでした。

4

1 に答える 1

0

あなたの最善の策は、CSS メディア クエリを使用することだと思います。

必要に応じて、現在のメディアの状態 (通常はデバイス幅) または特定の要素に基づいて、ページにまったく異なるスタイル シートを定義できます。

例えば

さまざまなスタイル シート

<link rel='stylesheet' href='css/base.css' />
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='css/large.css' />

で定義されたスタイルsmall.cssは、ビューポートが 700 ピクセル以下の場合にのみ適用され、 のスタイルは 701 ピクセル以上large.cssの場合に適用されます。

サイズ固有の規則:

body {
    background: #000;
    color: red;
}


//styles within this block are only applied when the window is <= 700px
@media all and (max-width: 700px) {
  body {
    background: #ccc;
    color: #258;
  }
}

Chris Coyer の CSS トリック(それ自体が CSS メディア クエリを非常に頻繁に使用する) には、これ以外にもたくさんあります。

さらに、ビューポート ユニットのサポートはかなり低く、メディア クエリはどこにでもあるわけではありませんが、はるかに一般的です(約 2 倍)。

于 2013-03-14T13:14:58.457 に答える