html - 如何使这个 HTML 片段响应？

Question

我有以下 html，js fiddle 更新：注意，我也在页面中使用 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%。它看起来并不总是很好。

Answer 1

A simple solution would indeed be to set the width at +/- 100% for the wrapping div. Also instead of adding extra javascript perhaps mediaqueries are the way to go?

In .css:

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

//styles for small screen devices here

}

In .html:

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

More on the subject