css - Angular2 2.4.3 和响应式网页设计 : using media queries seem not to work

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; }
`]