Html 使用媒体查询显示和隐藏
假设我有两个div和两个类。猫和老鼠，我想要： 计算机视图： 猫躲起来了 .老鼠来了 移动视图 .猫在表演 老鼠藏起来了 这些是我的密码，但我似乎无法做到Html 使用媒体查询显示和隐藏,html,css,Html,Css,假设我有两个div和两个类。猫和老鼠，我想要： 计算机视图： 猫躲起来了 .老鼠来了 移动视图 .猫在表演 老鼠藏起来了 这些是我的密码，但我似乎无法做到 <!doctype html> <html> <head> <meta charset="utf-8"> <style> @media screen and (min-width: 600px) { .cat {display: none;} }
<!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>
@媒体屏幕和屏幕（最小宽度：600px）{
猫先生
{显示：无；}
}
.老鼠
{宽度：300px；
高度：300px；
背景颜色：绿色；
}
@媒体屏幕和屏幕（最小宽度：0px）{
猫先生
{宽度：300px；
高度：300px；
背景色：红色；
}
.老鼠
{显示：无；}
.rat {
display: block;
}
.cat {
display: none;
}
.rat {
display: block;
}
.cat {
display: none;
}
@media (max-width: 600px) {
.rat {
display: none;
}
.cat {
display: block;
}
}
max width.rat {
display: block;
}
.cat {
display: none;
}
最大宽度：600px.rat{
显示：块；
}
猫先生{
显示：无；
}
@介质（最大宽度：600px）{
.老鼠{
显示：无；
}
猫先生{
显示：块；
}
}您遇到的问题是，这两个条件都满足，因此它会覆盖它并使用最大宽度条件。您可以尝试下面的代码。
@媒体屏幕和（最小宽度：600px）{
猫先生
{显示：无；}
}
.老鼠
{宽度：300px；
高度：300px；
背景颜色：绿色；
}
@媒体屏幕和屏幕（最大宽度：600px）{
猫先生
{宽度：300px；
高度：300px；
背景色：红色；
}
.老鼠
{显示：无；}
}
@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;
}
}
你可以用两种方法来做 1使用引导
猫
老鼠