Question

我有一个有趣的问题，我想删除低于760px宽度分辨率的<br>。我一直在使用这个一直有效，但它并没有在我正在研究的新网站上工作。

$(function() {
    if ($(window).width() < 760) {
        $('p.nobreak br').replaceWith(' ');
        $('span.vert-align.centerone br').replaceWith(' ');
    }
});

有趣的是，如果不是< 760我改为> 760（更高的分辨率），它确实有效！但我需要< 760这个。有什么建议吗？

Answer 1

为什么你不使用媒体查询来隐藏这些元素而不是javascript？

例如：

@media screen and (max-width:760px) {
    p.nobreak br, span.vert-align.centerone br { display: none; }
}

Answer 2

您当前的代码有效，但仅适用于加载window的分辨率。您需要在resize事件处理程序中应用逻辑，以便在窗口大小更改时作出反应。试试这个：

$(function() {
    var timer
    $(window).resize(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
           if ($(window).width() < 760){
               $('p.nobreak br, span.vert-align.centerone br').replaceWith(' ');
           }
        }, 100);
    });
});

但请注意，更好的解决方案是使用CSS媒体查询来执行此操作。它更快，并且如果窗口变大，还允许再次应用<br />标签的效果。试试这个：

<p>
    Lorem ipsum
    <br />dolor sit amet
</p>

@media (max-width: 760px) {
    p.nobreak br, 
    span.vert-align.centerone br {
        content: ' '
    }
    p.nobreak br:after, 
    span.vert-align.centerone br:after {
        content: ' '
    }
}

Working example（拖动结果面板大小句柄以查看效果）

调整窗口大小时删除<br/>标签

2 个答案: