发出媒体请求时使项目处于活动状态答案

【问题标题】：Make the item active when a media request is made发出媒体请求时使项目处于活动状态
【发布时间】：2018-12-11 09:01:57
【问题描述】：

@media only screen and (max-width: 480px) {
   #media_wrapper {
    height: 100%; //// ?????
    display: inline-block;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}

如您所见，该元素不适用于大屏幕display: none;，但我不知道如何正确设置查询中的显示属性以在小屏幕上显示，例如：block或inline-block，结果为一 - 不显示任何内容。我做错了什么？

【问题讨论】：

你脑子里有这个元数据吗：<meta name="viewport" content="width=device-width, initial-scale=1">
是的，
你应该定义一个高度。尝试更改为像素。
但我有一个包装器@media only screen and (max-width: 480px){ } .media_container{ height: 100%;位置：相对 } #media_wrapper{ 高度：100%； }

标签： css twitter-bootstrap media-queries

【解决方案1】：

试试这个

查看演示HERE

倒过来

CSS：

#media_wrapper {
  height: 100%;
  display: none;
}
@media only screen and (max-width: 480px) {
   #media_wrapper {
    height: 100%; 
    display: inline-block;
   }
}

【讨论】：

@Romikromikromik 欢迎您.. :) 但请记住 always declare the media queries at the bottom of stylesheet 并尽可能避免使用 !important

【解决方案2】：

最好的办法是改变命令的顺序：

见小提琴：https://jsfiddle.net/17d6hxsL/5/

#media_wrapper {
  height: 100%;
  display: none;
}
@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block;
   }
}

.wrapper{
  height:100%;
}

<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>

或者你应该设置!important来阻止覆盖：

见小提琴：https://jsfiddle.net/17d6hxsL/4/

@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block!important;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}
.wrapper{
  height:100%;
}

<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>

【讨论】：

谢谢你救了我的命）。阻止！重要；正在工作
乐于助人:)