1

Webページに検索フィールドがありますが、Webブラウザの画面サイズが変更されたときにサイズを変更する必要があります。

最初はウェブブラウザの画面のフルサイズであるため、最大幅に基づいて表示されますが、ウェブブラウザの画面サイズを小さくすると、検索ファイルのサイズも最小幅まで小さくなります。任意のアイデアどうすればそれを行うことができますか？、ここで私が試したこと。

.navbar-search input[type="text"]{
    font-size: 15px;
    height: auto;
    margin-bottom: 05px;
    max-width: 565px;
    min-width: 50px;
}

ここで1つの例を見つけました。画面サイズを小さくすると、検索ファイルのサイズも変わります。このリンク

4

5 に答える 5

5

これを行うには2つの方法があります。

1つは、ハードコードされたピクセルの代わりにパーセンテージを使用することです。inputにフィールドがある場合は、次divのように、入力フィールドの幅をdivの合計幅のパーセンテージとして指定できます。

input {
  max-width: 200x;
  width: 80%;
  min-width: 50px;
}

もう1つの方法は、より複雑なCSS3メディアクエリを使用することです。それらを使用したい場合は、グーグル検索が役立ちます。

パーセンテージの使用は常に簡単ですが、必要な微調整はできません。賢明に選択してください。

于 2013-03-06T18:16:24.993 に答える
4

彼らは@mediaクエリでそれをやっています

CSS：

@media (max-width: 480px){
    /* ... */
    .header .search-query{width:100px}
}

次に、さまざまなコンテキストのさまざまな@メディアクエリを使用して入力幅を再フォーマットします

@media (max-width: 680px){
    /* ... */
    .header .search-query{width:150px}
}

メディアクエリはCSS3モジュールであり、コンテンツのレンダリングを画面解像度などの条件（スマートフォンと高解像度画面など）に適応させることができます。これは、2012年6月にW3C推奨標準になりました。1これは、レスポンシブWebデザインの基盤となるテクノロジーです。

メディアクエリは、メディアタイプと、幅、高さ、色などのメディア機能を使用してスタイルシートのスコープを制限する少なくとも1つの式で構成されます。CSS3で追加されたメディアクエリを使用すると、コンテンツ自体を変更することなく、コンテンツの表示を特定の範囲の出力デバイスに合わせて調整できます。

于 2013-03-06T17:32:51.683 に答える
1

max-width、min-width、および設定値ではなくパーセンテージを持つ幅を設定する必要があります。（幅：75％、75pxではありません）

于 2013-03-06T17:24:32.310 に答える
1

Twitterブートストラップのような他のオプション（div、css、@ mediaの代わりに）を考えてみてください。

レスポンシブCSSが付属しておりbootstrap-responsive.css、質問については、このリンクを確認してください。のオプションがいくつかありますform。

画面サイズを携帯電話の画面までサイズ変更できますが、レイアウトは正常に機能しています。

于 2013-03-06T21:58:06.173 に答える
1

コンテナを作成する前に、幅に対するパーセンテージを使用し、オーバーフローしていることを確認し、ブロックとして表示してから静的に表示します。

.card {padding: 20px;} /*create container first*/
.search-container {overflow: hidden; border: 1px solid grey; background: white; display: block ; border-radius: 15px;}
.search-container input[type=text] {position: static; border: 1px dotted red; height: 30px; width: 90%; outline: none;}
/*you can set border to 'none'*/
/*Adjust width% in last css you like, incase you put icon*/
<div class="card">
  <div class="search-container">
    <form>
     <input type="text" maxlength="50" placeholder="Search.." name="search">
      </form>
  </div>
</div>

于 2020-10-08T08:20:57.133 に答える