Angular2 2.4.3和响应式网页设计:使用媒体查询似乎不起作用 [英] Angular2 2.4.3 and responsive web-design: using media queries seem not to work

问题描述

将Angular2 2.4.3与CSS3媒体查询功能结合使用时，

When using Angular2 2.4.3 in combination with CSS3 media query features either:

• 直接嵌入Angular2组件中(请参见下面的示例)

或

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

两种情况下的html组件均未根据媒体查询规范进行格式化.取而代之的是，仅呈现非媒体查询的CSS部分.

the html component in both cases is not formatted according to the media query specifications. Instead, only the non-media-query CSS parts are rendered.

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;)的台式机显示器

Hint: for sure, I'm using a desktop monitor with a width-resolution >840px ;)

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

Am I doing something wrong or are media queries not yet supported by Angular2? Maybe, I have to do additional stuff to let Angular2 detect the used media correctly?

推荐答案

您是否尝试过:

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

这篇关于Angular2 2.4.3和响应式网页设计:使用媒体查询似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！