隐藏手机和平板电脑上的元素(横向和纵向)，并仅在桌面上显示

Question

我正在尝试在我的网站上显示目录，我只希望它出现在台式机和笔记本电脑上，而不是在平板电脑或移动设备上以纵向或横向显示。我知道媒体查询是可能的，但我无法弄清楚。

这是我到目前为止所拥有的：

@media only screen and (min-width: 64rem)
.toc-container {
display: none;
}
.toc-container {
display: -webkit-box;
display: flex;
-webkit-box-align: right;
align-items: left;
}
@media screen and (min-width: 768px) 
.tiktoc {
display: none;
}
.tiktoc {
position: absolute;
top: 165px;
left: 1150px;
bottom: 0;
width: 350px;
margin-bottom: 0;
}

Answer 1

您可以使用@media-query，以便禁用tabletablets和mobile devices

在下面的code表中，仅在laptops和desktop设备上显示

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
.tiktoc {
display: none;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}
.tiktoc {
position: absolute;
width: 350px;
margin-bottom: 0;
}

<table class="tiktoc">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>