我在处理媒体查询时遇到了一些问题。当屏幕宽度小于 768px 时,某些内容应该会消失。确实如此。显示器上没有内容,但如果我查看 DOM,内容仍然存在。
我是如何试图摆脱这种情况的:
@media screen and (max-width: 768px) {
.left {
display: none;
}
}
我认为应该是这样: JS 代码应该解析当前的显示分辨率,如果它达到 768px 的宽度,则删除内容。
我不确定我的想法是否正确。你能解释一下(甚至显示代码)如何删除这些内容。
这是 html 模板:
<template>
<div class="left">
<div class="container">
<div class="left__row" v-if="ListSearch.length">
<LeftSideItem
v-for="item in ListSearch"
v-bind:item="item"
v-on:delete-item="deleteItem"
/>
</div>
<div class="left__empty" v-else>
<p >No search history</p>
</div>
</div>
</div>
</template>
答案 0 :(得分:-1)
试试这个:
$(document).ready(function() {
if ($(window).width() < 768) {
$('.left').remove();
}
});