css - CSS和媒体查询不起作用-MQ的新手

哇，很难上班...但是对于媒体查询来说是新手...

使用angular2 btw ...

很简单的 ...

如果最小宽度：576px，请执行此操作，否则....

例如

根据以下信息（如果576），则显示菜单类并隐藏工具栏类，反之亦然

        <ng-container class="menu" >
            <i class="material-icons">menu</i>
        </ng-container>

        <ng-container class="toolbar">
            <span color="accent" style="padding-right: 15px">SolarStack</span>
        </ng-container>

这是我的CSS：

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .toolbar{
        visibility: collapse;
    }

 }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .menu{
        visibility: hidden;
    }
 }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .menu{
        visibility: hidden;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .menu{
        visibility: hidden;
    }
 }

本质上，如何使用媒体查询基于屏幕大小显示或隐藏元素？菜单将与iPhone和桌面上的工具栏一起显示

最佳答案

您或者需要为您的班级样式设置默认值，然后可以在特定的屏幕尺寸上更改它，或者更新您的媒体查询以在任何以该大小更改的班级上设置样式。


  如果最小宽度：576像素，请执行以下操作：


意味着对于包括576或以上的所有内容，请执行以下操作：

@media (min-width: 576px) {
    .toolbar{
        visibility: hidden;
    }
    .menu {
        visibility: visible;
    }
 }

  否则：


这意味着对于小于576的所有内容，请执行以下操作：

@media (max-width: 576px) {
    .toolbar{
        visibility: visible;
    }
    .menu {
        visibility: hidden;
    }
 }

In this fiddle, at least，看来min-width是包含在内的，而max-width不是。尝试在575和576之间更改输出iFrame的宽度。

关于css - CSS和媒体查询不起作用-MQ的新手，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46626693/