0

HTML 要素 (この場合は入力ボックス) がさまざまな画面解像度で「最適な」幅を維持するようにしたいと考えています。

私の主観的なルール (簡単にするために: マージンの必要性を無視します):

  1. 最初に要素の幅をウィンドウ幅の 40% に設定します。
  2. 要素のサイズが特定の幅 (例: 200 ピクセル) を下回る場合は、その最小幅を維持します。
  3. 要素が画面に収まらない場合 (この例では、ウィンドウの幅が 200 ピクセルより小さい場合)、要素の幅をウィンドウの幅に設定します。

純粋な CSS を使用してこれを実現できますか (それでも IE8 をサポートしますか)?

4

3 に答える 3

1

他の人が言ったように、メディアクエリを使用できます。これは、要件の実際の例です。

input {
  width:40%;
  min-width:200px;
}
@media (max-width: 200px) {
  input {
    width:100%;
    min-width: 0;
  }
}

http://jsfiddle.net/bEvUZ/

于 2013-06-21T11:54:23.073 に答える