html5 - 如何使此HTML代码段具有响应性？

我有下面的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%。它看起来不总是很好。

最佳答案

一个简单的解决方案就是将wrapping div的宽度设置为+/-100%。另外，也不要添加额外的javascript，也许mediaqueries是可行的方法？
在.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" />

Moreon the subject