javascript - 需要帮助根据屏幕宽度删除或​​隐藏 div

Question

所以我在将任何屏幕 > 小于 768px(平板电脑/台式机)上的 3x3 图片库布局更改为适用于任何屏幕 <大于 768px 的图像 slider 时遇到了问题(移动)。

在大家的帮助下，尤其是 Danilo(评论中的解决方案)，问题是 css 没有正确定位屏幕，我需要 - @media only screen，我还错过了一个 DIV...(我知道菜鸟错误)。

因此，如果有人试图在 Bootstrap 4 中将显示的内容从桌面布局更改为移动布局，您可以使用CSS 媒体查询以包装的 DIV 为目标显示或不显示。

更新后的工作片段如下:

@media only screen and (min-width: 768px) {
    .slider {
        display: none;
    }
    .block {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .slider {
        display: block;
    }
    .block {
        display: none;
    }
}

.hold-tests {
    display: flex;
    width: 100%;
}

.col {
    flex: 1;
} 

	<!--- Start of Gallery Section -->	
	<div id="hold-tests">
		<div class="col slider">
			<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
				<div class="carousel-inner col-" role="listbox">
					<!--- First Slide -->
					<div class="carousel-item active">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait2.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
				</div>
					<div class="narrow">
						<div class="col-12">
							<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
						</div>
					</div>
			</div>
		</div>	

		<div class="col block">
			<div id="gallery" class="offset">
				<div class="col-md">
					<div class="row no-padding">
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="narrow">
					<div class="col-12">
						<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--- End of Gallery Section -->

Answer 1

由于您使用的是 Bootstrap ，因此请使用它。不需要 jQuery，因为它已经完全涵盖了。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
  Only visible starting from md
</div>
<div class="d-md-none">
  Only visible on small screen
</div>

https://getbootstrap.com/docs/4.0/utilities/display/

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

---

另请注意，id 通常不以 # 开头。尽管这可能是合法的，但您至少必须在 jquery 代码中使用 $('##option1') 选择它们。