响应式导航框

Question

我用CSS动画和javascript制作了一个导航栏。但是我无法做出回应。我希望在调整窗口大小小于700像素时不显示导航栏动画，并且在大于700像素时应显示动画。这意味着css paart上transform的{​​{1}}属性必须隐藏窗口大小调整为700px时。

three-d-box :hover

$('.block-menu').find('a').each(function(){

  var el = $(this),
       elText = el.text();
  
  el.addClass("three-d");
  el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});

.container {
   width: match-parent;
   padding: 12px ;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #fc0;
  text-decoration:none;
}

.block-menu {
	width:fit-content; 
  height:fit-content;
}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
  width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px;               
                margin-left:auto;
                margin-right:auto;
                margin-top:1px;
                margin-bottom:1px;
}
.three-d {
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
}
	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box {
		transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
	transform: rotatex(0deg) translatez(25px);
}

.back {
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;
}

.front, .back {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;
}

.back {
  background: #d05ce8;
}