如何显示html内容仅在平板电脑上，而不是在手机或桌面

How to display html content only on tablets and not on phone or desktop?

本文关键字：平板电脑 桌面 手机 何显示 显示 html      更新时间：2023-09-26

我在html中有一个div元素，其中包含一个视频教程，我想只在平板电脑上查看时显示，而不是在手机或台式机上。我该如何做到这一点?

你可以使用CSS媒体查询来解决这个问题。平板电脑的标准尺寸范围是768px到992px。因此，您可以编写两个媒体查询:一个用于小于平板电脑大小的(移动设备)，另一个用于大于平板电脑大小的(台式机)。然后将可见性设置为隐藏，显示设置为无。任何你想为平板电脑编写的css都可以包含在你的标准css中。

@media screen and (max-width: 768px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}
@media screen and (min-width: 992px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

使用屏幕宽度的媒体查询:

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

这里有特定的屏幕宽度，你可以设置元素的css display:block;或display: none;

所以你的代码应该是

@media (min-width:320px) { display: none; }
@media (min-width:801px) { display: block; }
@media (min-width:1025px) { display: none; }

让我们假设你的div有一个名为" container "的类。

@media (min-width: 768px) and (max-width: 1024px){
  .container{
   display: block;
  }
}
@media (max-width: 767px){
  .container{
   display: none;
  }
}
@media (min-width: 1025px){
  .container{
   display: none;
  }
}

别担心。使用我组合在一起的以下自定义类!请注意，使用媒体查询(这些类使用)，您将失去一些浏览器支持旧版本的Internet Explorer…所以用response .js修复这个问题!

在样式表中添加以下内容:

//medium+ screen sizes
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}
//small screen sizes
@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }
    .desktop-only {
        display:none !important;
    }
}

这给了你两个类——移动专用和桌面专用。

顾名思义，如果你指定了"mobile-only"类，那么它只会在屏幕尺寸很小(991px或以下)时显示[智能手机，一些平板电脑]，而"desktop-only"只会显示在992px或更大的屏幕上。

这些值很容易改变，整个概念可以毫无问题地修改。您甚至可以添加一个"仅限xml桌面"类。让你开始…

//large resolutions only
@media (min-width: 1200px) {
...
}

媒体查询对于响应式设计非常有用。只是要确保不要做得太多，不要添加太多的断点。如果你想把每件事都解释清楚，你会让自己很头疼的。

相关文章：