Angular2 2.4.3和响应式网页设计：使用媒体查询似乎不起作用

Question

当结合Angular2 2.4.3和CSS3媒体查询功能一起使用时：

• 直接嵌入Angular2组件中（请参见以下示例）

要么

• 使用“ styles.css”在“ index.html”中集中引用

两种情况下的html组件均未根据媒体查询规范进行格式化。相反，仅呈现非媒体查询的CSS部分。

import {Component} from '@angular/core';

@Component({
    /* necessary for using relative paths (only works in combination with
     * 'commonjs'-transpiled modules, see:
     * https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
     */
    moduleId: module.id,
    selector: 'login',
    templateUrl: '../templates/login.component.html',
    styles: [`
        @media only screen and (min-width: 840px)
        .layout {
            font-size: 58px;
        }
        .layout { background: green; }
    `]
})
export class LoginComponent {        
}

提示：当然，我正在使用宽度分辨率> 840px的台式机监视器；）

我是在做错什么还是Angular2还不支持媒体查询？也许，我必须做一些其他的事情才能让Angular2正确检测使用的媒体？

Answer 1

@Holger，问题不在于Angular，而在于您的样式实现。您已在媒体查询中的样式周围省略了大括号。它看起来应如下图所示，我认为它应该可以解决您的问题。

styles: [`
    @media only screen and (min-width: 840px) {
        .layout {
            width: 368px;
        }
    }
    .layout { background: green; }
`]