如何使此代碼僅出現在 600 像素及以上？（我不希望它出現在手機或平板電腦上）

Question

如何使此代碼僅出現在 600 像素及以上？ （我不希望它出現在手機或平板電腦上）。

這是下面的代碼，對不起，如果它一團糟，我猜這個修復與第 121 行的 @media 行有關。

<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>

Answer 1

如果我正確理解您的問題，我相信您需要更改媒體查詢以使用

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

Answer 2

您可以通過添加媒體查詢並將您的 css 放在那里來實現這一點：

@media screen and (min-width: 600px) {

}

Answer 3

如果你想在手機或平板電腦上隱藏一些東西，你可以使用這個 css 示例：

.yourClassName {
  @media (max-width: 700px) {
   display: none;
  }

  @media (max-width: 300px) {
   display: none;
   // something else for smaller sizes
  }
}

如何使此代碼僅出現在 600 像素及以上？（我不希望它出現在手機或平板電腦上）

問題描述

3 個解決方案

解決方案1
0 2020-10-30 14:52:41

解決方案2
0 已采納 2020-10-30 14:53:36

解決方案3
0 2020-10-30 14:56:06

如何使此代碼僅出現在 600 像素及以上？ （我不希望它出現在手機或平板電腦上）

問題描述

3 個解決方案

解決方案1 0 2020-10-30 14:52:41

解決方案2 0 已采納 2020-10-30 14:53:36

解決方案3 0 2020-10-30 14:56:06

如何使此代碼僅出現在 600 像素及以上？（我不希望它出現在手機或平板電腦上）

解決方案1
0 2020-10-30 14:52:41

解決方案2
0 已采納 2020-10-30 14:53:36

解決方案3
0 2020-10-30 14:56:06