jQuery 列表视图中的移动响应缩略图

Question

简而言之，当设备宽度不足以支持缩略图时，我希望隐藏 JQM 列表视图中的缩略图。我在技术上可以做到这一点，但是 space 没有被重新使用（这是隐藏它们的全部意义所在）。

我的CSS:

@media all and (max-width: 30em) {
    .list-breakpoint img { display: none; }
}

以及列表的一个元素：

<li class="list-breakpoint" data-theme='a'>
    <a href="#">
        <img src="..." class="ui-li-thumb">
        <p><b>Title</b><br/>
           Line 1<br/>
           Line 2</p>
    </a>
</li>

Answer 1

LI 中的锚标记按钮在左侧有额外的填充，以便为图像腾出空间，因此在隐藏图像的同时，调整填充：

@media all and (max-width: 30em) {
    .list-breakpoint img { display: none; }
    .list-breakpoint a.ui-btn { padding-left: 1em !important; }
}

DEMO