javascript - 如何根据客户端的屏幕大小使用 javascript 更改 DOM 元素

Question

我正在处理这个事件 slider ，它有 3 个带有左右滚动按钮的帖子。但我是响应式设计的新手，一旦屏幕尺寸减小到 1000px，我想更改包括 DIV 中所有元素在内的全部内容。请帮助我提出一些想法。

Answer 1

看看下面使用 css 媒体查询的例子，它可能对你有帮助。

<style>
	@media(min-width:1000px) {
	    .hide-on-desktop {
	        display:none;
	    };
	}

	@media(max-width:999px) and (min-width:767px) {
	    .hide-on-laptop {
	        display:none;
	    };
	}

	@media(max-width:766px) {
	    .hide-on-mobile {
	        display:none;
	    };
	}
</style>

<div class="hide-on-desktop hide-on-laptop"> for mobile </div>
<div class="hide-on-desktop hide-on-mobile"> for laptop </div>
<div class="hide-on-laptop hide-on-mobile"> for desktop </div>