显示和隐藏与媒体查询

鉴于我有两个类与两个div;的.cat & .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>

来源

2017-04-12 Haidi

一个错误出现。它应该是.cat代替。 – Haidi

min-width：0和min-width：600px都满足条件和.cat css覆盖它。使用最大宽度：600px的手机 –

只是一个指针，但我没有看到媒体查询的大括号。休息似乎对我很好 – Sagar

比方说，我们设置了桌面优先设计。因此，首先设置桌面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意味着每个屏幕尺寸小于或相同的宽度作为我们的设定值。（< = 600）

min-width意味着每个屏幕尺寸是大或相同的宽度，我们的设定值（> = 600）

来源

2017-04-12 07:19:09 Justinas

可以编写的CSS的桌面而不媒体查询并在这情况鼠将显示和猫会隐藏。

.rat { 
    display: block; 
} 

.cat { 
    display: none; 
}

然后在移动您媒体查询，你可以隐藏大鼠和显示猫咪。这里max-width:600px指定宽度低于600px,所以这个css会在设备宽度小于600的时候存在。

下面是一个编译例子：

.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>

来源

2017-04-12 07:19:22

你的问题是，这两个条件满足，因此将其覆盖，并使用最大宽度的状态。而不是你可以尝试下面的代码。

@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;} 
 

 
}

<body> 
 

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

 
</body>

来源

2017-04-12 07:23:07 vijay

就是这么简单：

@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; 
    } 
}

来源

2017-04-12 07:23:25

您可以通过两种方式做到这一点。

1使用自举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>

来源

2017-04-12 07:25:45 Nitheesh

显示和隐藏与媒体查询

回答

相关问题