如何在 angular 组件的 styles.scss 中使用媒体查询？

Question

我正在尝试在组件样式中使用媒体查询，但是当我调整 window 大小时，没有任何反应

 @media query screen and (max-width: 768px) { 
/* Here are some changes*/
}

根本不起作用，我是否需要加载一些模块或如何修复它。任何帮助表示赞赏。

Answer 1

更简单一点的方法，

@media (max-width: 768px) { 
    /* Here are some changes*/
}

Answer 2

使用以下语法。这是媒体查询的正确语法。 希望这对您有所帮助！！

@media only screen and (max-width: 768px) { 
    /* Here are some changes*/
}

Answer 3

您可能希望为每个断点编写不同的媒体查询。另外，语法如下

    /* Tablet*/
    @media screen and (max-width: 768px) {
      /* Here are some changes*/
    }

   /* Mobile */
    @media screen and (max-width: 320px) {
          /* Here are some changes*/
    }

Answer 4

删除query

@media screen and (max-width: 768px) 
{
 /* Here are some changes*/
}