标签: media-queries

我有一个广泛使用 CSS3 媒体查询的移动网站。

我想为不支持媒体查询的浏览器创建一个版本，为它们添加一个额外的 css 文件，覆盖一些 css 规则。

我想知道是否有办法禁用 Firefox (21.0) 中的媒体查询支持以便能够进行开发，因为我没有其他东西可以测试。

Chrome 解决方案也可以解决，尽管我更喜欢使用 firebug。

我有一个id #wants-to-meet在1150px我想改变它的CSS.

通常使用媒体查询,我所要做的只是针对id
,有时我需要编写类似的东西'parent-selector > targeted-selector'

但是我的媒体查询由于某种原因被划掉/否定:

出于某种原因,我需要深入研究才能改变它:

@media all and (max-width: 1150px) {
            #li-affiliate-incoming-msg {
                #message_container {
                    #td-details {
                        #request_details {
                            #wants-to-meet {
                                margin-top: 5px;
                                margin-right: 0;
                                padding: 8px 20px 3px 20px;
                                color: blue;
                                background: red;
                            }
                        }
                    }
                }
            }
        }

我正在使用SASS,我的#wants-to-meetid嵌套了8个标签,这可能就是这个原因吗？

你知道为什么会这样吗？

我的网页上有一个响应表。该表包含三列和很多行。但是，有些行的colspan 3仅包含一列。

我只需要一个带有两列其他表格的表格（仅适用于大屏幕），因此我需要将colspan修改为5。

中小屏幕

+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+

大屏幕-我有什么

+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  | …

我有一个移动菜单按钮（只能通过 display:block 使用媒体查询查看）。单击该按钮时，会出现我的主“移动”菜单 - 我使用简单的 javascript 代码（见下文）执行此操作。

问题...如果我单击按钮展开菜单（将内联样式从 display:none 更改为 display:block），然后增加浏览器大小...我的菜单不再消失。因此，内联样式无法识别媒体查询...

下面是扩展我的菜单的脚本......

<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

以下是一些样式.... 您将看到 menu-mobile（即实际菜单）和 mobile-menu-but（即按钮）被隐藏（显示：无）。当浏览器窗口缩小时，按钮出现（在媒体查询中带有 display:block），但菜单仍然隐藏。然后，当您单击 javascript 按钮时，会添加内联样式 display:block 以设置移动菜单。

#mobile-menu-but, #menu-mobile { display:none; } 
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }

@media (max-width: 790px) { 
  /* Switch to Mobile Menu when too long */
  #menu …

我的媒体查询不适用于 768 像素 ipad 肖像。

如果我更改min-width工作完美，但会影响桌面版本或超过 769px 的其他分辨率时的大小

@media only screen and (max-width: 768px) {
  .sidebar-container.pressed .content-container {
    width: 93% !important;
  }
}