Question

鉴于我有两个有两个类的div; .cat＆amp; .rat，我想：

电脑观点： .cat正在隐藏 .rat正在展示

移动视图 .cat正在显示 .rat正在隐藏

这些是我的代码，但似乎无法实现。

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>

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

    .cat
    {display: none;}
    }

    .rat
    {width: 300px;
    height: 300px;
    background-color: green;
    }


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

    .cat
        {width: 300px;
        height: 300px;
        background-color: red;
        }

    .rat
    {display: none;}


</style>

</head>

<body>

<div class="cat"></div>
<div class="rat"></div>

</body>
</html>

Answer 1

这很容易：

@media (min-width: 768px) {
    .cat
    {
      display: none;
    }
    .rat
    {
      width: 300px;
      height: 300px;
      background-color: green;
      display:block;
    }
}
@media (max-width: 767px) {
    .cat
    {
       width: 300px;
       height: 300px;
       background-color: red;
       display:block;
    }
    .rat
    {
       display: none;
    }
}

Answer 2

假设我们设置了桌面优先设计。首先设置桌面CSS：

.rat {
   display: block;
}

.cat {
   display: none;
}

现在当屏幕小于600px时将其反转：

.rat {
   display: block;
}

.cat {
   display: none;
}

@media (max-width: 600px) {
    .rat {
       display: none;
    }

    .cat {
       display: block;
    }
}

max-width表示每个屏幕尺寸与我们的设定值相比更小或相同。（＆lt; = 600）

min-width表示每个屏幕尺寸都比我们的设定值更大或相同（> = 600）

Answer 3

您可以在没有媒体查询的情况下编写 css for desktop ，在这种情况下，鼠标会显示而cat会隐藏。

.rat {
  display: block;
}

.cat {
  display: none;
}

然后在您的媒体查询移动设备中，您可以隐藏鼠标并显示猫咪。这里max-width:600px指定宽度低于600px ，所以当设备宽度小于600时，此css将存在。

这是一个编译的例子：

.rat {
  display: block;
}

.cat {
  display: none;
}

@media (max-width:600px) {
  .rat {
    display: none;
  }
  .cat {
    display: block;
  }
}

<div class="rat"><img src="https://dummyimage.com/600x400/green/fff&text=Rat" /></div>
<div class="cat"><img src="https://dummyimage.com/600x400/ff0000/fff&text=Cat" /></div>

Answer 4

你遇到的问题是条件满足所以它覆盖它并使用max-width条件。而不是你可以尝试下面的代码。

＆＃13;

@media screen and (min-width: 600px) {

    .cat
    {display: none;}
    }

    .rat
    {width: 300px;
    height: 300px;
    background-color: green;
    }


@media screen and (max-width: 600px) {

    .cat
        {width: 300px;
        height: 300px;
        background-color: red;
        }

    .rat
    {display: none;}

}

＆＃13;

<body>

<div class="cat"></div>
<div class="rat"></div>

</body>

＆＃13;

Answer 5

你可以用两种方式做到这一点。

1使用bootstrap hidden classes

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
</head>

<body>

    <div class="hidden-lg cat">Cat</div>
    <div class="hidden-xs rat">Rat</div>

</body>

</html>

<强> 2。使用媒体查询

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        .rat {
            display: block;
        }
        
        .cat {
            display: none;
        }
        
        @media (max-width:600px) {
            .rat {
                display: none;
            }
            .cat {
                display: block;
            }
        }
    </style>

</head>

<body>

    <div class="cat">Cat</div>
    <div class="rat">Rat</div>

</body>

</html>

使用媒体查询显示和隐藏

5 个答案: