如何设置代码仅在600px及以上分辨率设备显示？

你猜的完全没错，确实是通过调整@media媒体查询规则来实现这个需求。下面我直接给你具体的修改方案和完整代码：

修改思路 #

核心就是在屏幕宽度小于600px的场景下，直接将手风琴的容器.accordion设置为隐藏状态，这样移动端（手机、小平板）就不会加载显示这个组件了。

具体修改点 #

找到原代码中第121行左右的@media规则，替换成下面这段代码：

@media screen and (max-width: 599px) {
  .accordion {
    display: none; /* 直接隐藏整个手风琴组件 */
  }
  body {
    margin: 0;
  }
}

完整修改后的代码 #

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
<style>
#allrecords ul { padding: 0px !important; }
h1 { text-align: center; font-family: Montserrat, sans-serif; color: #fff; }
.accordion { width: 100%; max-width: 2500px; overflow: hidden; height: 690px; }
.accordion ul { width: 100%; display: table; table-layout: fixed; padding-inline-start: 0px !important; }
.accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 18%; height: 750px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; }
.accordion ul li div { display: block; overflow: hidden; width: 100%; }
.accordion ul li div a { display: block; display:flex; flex-direction: row; align-items:center; height: 100%; width: 100%; position: relative; vertical-align: bottom; box-sizing: border-box; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; }
.accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; }
.accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; }
.accordion ul li div a p { top: 25px; font-size: 13.5px; }
.accordion ul li:nth-child(1) { background-image: url("https://drive.google.com/uc? export=download&id=1ZBYyMeZ7TEGMj2eeey7M6N3AAZKG5vZs"); }
.accordion ul li:nth-child(2) { background-image: url("https://drive.google.com/uc? export=download&id=1YRADuysiSfjd5jkZnLXSmgMufGQpqnso"); }
.accordion ul li:nth-child(3) { background-image: url("https://drive.google.com/uc? export=download&id=1mMmFbCfhSppCXOtDiF8yTrb-YR_thick"); }
.accordion ul li:nth-child(4) { background-image: url("https://drive.google.com/uc? export=download&id=1HyCs9w20reSLLlNrPPKdKdbSlHHdbZp8"); }
.accordion ul li:nth-child(5) { background-image: url("https://drive.google.com/uc? export=download&id=1yVHKVZbQu67hMlRCzdqL5XPb2nNgwE4-"); }
.accordion ul li:nth-child(6) { background-image: url("https://drive.google.com/uc? export=download&id=194gXHwy49NxS7m40RSUQEUc2Nqkg7V65"); }
.accordion ul li:nth-child(7) { background-image: url("https://drive.google.com/uc? export=download&id=1BIkOC1bzXDGPcqW6QHx5lCojJlD5cEeY"); }
.accordion ul:hover li { width: 8%; }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0); }
.accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }

/* 修改后的媒体查询规则 */
@media screen and (max-width: 599px) {
  .accordion {
    display: none; /* 隐藏手风琴组件 */
  }
  body {
    margin: 0;
  }
}

.about { text-align: center; font-family: 'Open Sans', sans-serif; font-size: 12px; }
.about a { color: blue; text-decoration: none; }
.about a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="accordion">
<ul>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
<li>
<div>
<a href="#"> </a>
</div>
</li>
</ul>
</div>
</body>
</html>

补充说明 #

• 我把媒体查询的max-width设为599px，刚好和600px的分界点对应，避免边界值的显示冲突。
• 如果之后你想在移动端展示替代内容，可以在这个媒体查询里添加一个移动端专属容器，设置display:block即可。

内容的提问来源于stack exchange，提问作者Danny Reed