0

この素晴らしいスクリプトhttp://blueimp.github.io/jQuery-File-Upload/を使用 して、レスポンシブ ページのアイコンのサイズ変更に関する興味深い機能を見ました。たとえば、ブラウザ ウィンドウを大きく開いた状態 (デスクトップ) にはアイコン ([開始] と [キャンセル] + アイコン) があり、ブラウザ ウィンドウのサイズを変更する (スマートフォン) には、もう 1 つ短くて小さい (アイコンのみ) があります。

どうすればこの効果を達成できますか? について話しているネット上のチュートリアルは見つかりませんでした

評判が良くないなどの理由で画像を投稿できず申し訳ありません:-(

4

1 に答える 1

2

正しく理解していることを願っていますが、大きな画面ではアイコンとテキストを表示し、小さな画面サイズではアイコンのみを表示するレスポンシブな「ボタン」が必要です。

メディアクエリを使用した単純な css でそれを行うことができます。たとえば、html が次のようになっているとします。

<button class="btn btn-primary start" type="submit">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>
<button class="btn btn-warning cancel" type="reset">
    <i class="glyphicon glyphicon-ban-circle"></i>
    <span>Cancel upload</span>
</button>

次のような ccs ルールを作成できます。

@media only screen and (min-width: 0px) and (max-width: 679px) {

    .btn span
    {
        display: none;
    }

}

ブラウザ ウィンドウの幅が 0px ～ 679px の場合、ブラウザはボタンにテキストを表示しません。

于 2013-09-17T15:43:15.190 に答える