如何使此代码只出现在600px及以上？（我不希望它出现在手机或平板电脑上）。
这是下面的代码，抱歉，如果它是一个混乱，我猜修复与@Media线在121行ISH。
<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: 600px, max-height: 1200px) {
body { margin: 0; }
.accordion { height: auto; }
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
.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>
您可以通过添加一个媒体查询并将css放入其中来实现这一点:
@media screen and (min-width: 600px) {
}
如果我正确理解了您的问题，我相信您需要将您的媒体查询更改为使用
min-width: 600px, min-height: 1200px
这将指定您的css只能在600px或以上宽和1200px或以上高的位置发挥作用
这个关于w3学校的例子应该提供更多的背景
https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries1
原始页面，例如https://www.w3schools.com/css/css3_mediaqueries.asp
如果要隐藏移动或平板电脑大小上的某些内容，可以使用以下css示例:
.yourClassName {
@media (max-width: 700px) {
display: none;
}
@media (max-width: 300px) {
display: none;
// something else for smaller sizes
}
}
