媒体查询

Question

我在使用“滑动”进行媒体查询时遇到问题。

如果我在“平板电脑”模式下打开我的网站，则滑动可以在手机和平​​板电脑中使用，桌面不会。

但是，如果我在文本编辑器中再次保存文件并在桌面模式下打开它们，它们可以正常工作，但不适用于移动设备和平板电脑。

.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
	-ms-touch-action: none;/*pan-y on desktop*/
	touch-action: none; /*pan-y on desktop*/
}

.swipe-wrap{
	overflow: hidden;
	position: relative;
}

.swipe-wrap > div {
	float: left;
	width: 100%;
	position: relative;
}

<div id="slidepassos" class="swipe slidepassos">
	<div class="swipe-wrap">
		<div class="mySlides">
			<div class="passo-um">
			<div class="passoscont">
			<h1>How?</h1>
			<h2>Step 1:</h2>
			<img src="img/passoumilu.svg" class="passoumilu">
			<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
			<img src="img/swipeleft.png" class="swipeleftcontent">
			<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
			</div>
			</div>
		</div>
		<div class="mySlides">
			<div class="passo-dois">
			<div class="passoscont">
			<h1>How?</h1>
			<h2>Step 2:</h2>
			<img src="img/passodoisilu.svg" class="passoumilu">
			<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
				<img src="img/swipeleft.png" class="swipeleftcontent">
				<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
			</div>
			</div>
		</div>
		<div class="mySlides">
			<div class="passo-tres">
			<div class="passoscont">
			<h1>How?</h1>
			<h2>Step 3:</h2>
			<img src="img/passotresilu.svg" class="passoumilu">
			<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
				<img src="img/swipeleft.png" class="swipeleftcontent">
				<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
			</div>
			</div>
		</div>
		<div class="mySlides">
			<div class="passo-quatro">
			<div class="passoscont">
			<h1>How?</h1>
			<h2>Step 4:</h2>
			<img src="img/passoquatroilu.svg" class="passoumilu">
			<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
				<img src="img/swipeleft.png" class="swipeleftcontent">
				<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
			</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
	window.mySwipe = Swipe(document.getElementById('slidepassos'));
	</script>