从手机和平板电脑（横向和纵向）隐藏元素并仅在桌面上显示

Question

我想在我的网站上显示 table 内容，我只希望它以纵向或横向显示在台式机和笔记本电脑上，而不是 tablets 或移动设备上。我知道媒体查询是可行的，但我想不通。

这是我目前的情况：

@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，因此要在 tablets 和 mobile devices

上禁用 table

下面的 code table 仅在 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>

从手机和平板电脑（横向和纵向）隐藏元素并仅在桌面上显示

Hide element from mobile and tablet (in landscape and portrait) and show on desktop only

html

css

media-queries