2

私は次のhtml、js fiddle Updateを持っています：注、私はページでJquery Mobileも使用しています。

        <div class="control my-control">
        <div>
            <div>
                <div>Title:</div>
                <div></div>
                <div></div>
            </div>
            <div>
                <div>Lyrics:    </div>
                <div>
                    <div class="lyric-content"></div>
                </div>
                <div></div>
            </div>
        </div>
        <div>
            <img src="http://cdn1.iconfinder.com/data/icons/snowish/72x72/actions/gtk-media-play-ltr.png"></div>
    </div>​

これはうまく機能します。しかし、これはレスポンシブではないということは、モバイルでもデスクトップでも同じように見えることを意味します。幅を 100% にしてみました。常に良いとは限りません。

4

1 に答える 1

1

簡単な解決策は、ラッピング div の幅を +/- 100% に設定することです。また、余分な JavaScript を追加する代わりに、おそらくメディアクエリを使用する方法がありますか?

.css:

@media only screen and (max-width: 480px) {

// 小さい画面のデバイス用のスタイルはこちら

}

.html の場合:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="a-stylesheet-for-smaller-screens.css" />

この件に関する詳細

于 2012-12-31T16:41:35.593 に答える