调整屏幕大小时隐藏元素

Question

我有3个相同的<div>s:

<div class="box">Hello World!</div>    
<div class="box">Hello World!</div>    
<div class="box">Hello World!</div>

我希望所有这些都显示在桌面屏幕上，如果是平板电脑，只有两个显示，如果是手机，只有一个显示。如何仅使用引导程序和CSS来完成此操作？(请注意，我无法更改html部分(

Answer 1

1. 在CSS中，我们可以使用媒体查询。

   @media (max-width: 768px) {
   .box:first-of-type,
   .box:last-of-type {
   display: none;
   }
   }
   @media (max-width: 992px) {
   .box:first-of-type {
   display: none;
   }
   }
   

2. Bootstrap附带实用程序类。我们直接在HTML中使用它们。为了使用实用性类获得相同的结果，我们可以这样做。

   <div class="box d-none d-md-block">Hello World!</div>
   <div class="box d-none d-lg-block">Hello World!</div>
   <div class="box">Hello World!</div>
   

Answer 2

您可以在css中使用媒体查询来确定设备的设备类型，并使用child的第n个来隐藏使用display:none的元素。下面给出的代码片段对此进行了更好的解释。

@media (min-width: 576px) {
.box:first-child, .box:last-child{
display:none
}
@media (min-width: 768px) {
.box:first-child{
display:none
}

576px用于移动设备，768px用于平板电脑，默认情况下，这三个div在桌面设备中都可见。

Answer 3

我可以向您展示实现这一点的简单方法：

在HTML文件中，您更改为：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<div class="box desktop tablet mobile">Hello World!</div>
<div class="box desktop tablet">Hello World!</div>
<div class="box desktop">Hello World!</div>

在你的CSS中，你只需要这样做：

.box {
display: none;
}    
@media only screen and (min-width: 1150px) {    
.box.tablet {
display: none;
}    
.box.desktop {
display: block;
}    
}
@media only screen and (min-width: 768px) and (max-width: 1149px) {    
.box.desktop {
display: none;
}    
.box.tablet {
display: block;
}        
}

@media only screen and (max-width: 767px) {    
.box.desktop {
display: none;
}    
.box.tablet {
display: none;
}    
.box.mobile {
display: block;
}        
}

Answer 4

您可以为此使用CSS媒体查询。使用CSS，您可以根据元素的位置来选择元素。所以基本上@imran的回答会引起你的关注。

媒体查询检测你的窗口大小，当涉及到屏幕大小时，它会触发CSS部分。然后.box:last-child、.box:first-child选择器将选择html中的第n个元素。有关更多详细信息，请访问以下链接。

• 媒体查询：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

• 第n个选择器：https://www.w3schools.com/cssref/sel_nth-last-child.asp