小编Dev*_*ker的帖子

我尝试使用 HostListener 跟踪滚动位置以更改标题的颜色。

我的标题组件如下，

import { Component, OnInit, Input, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log(window.scrollY);
  }

}

但是当我滚动时，我没有在控制台中收到任何日志。

我尝试将 HostListener 放在主 app.component 中，因为我的头组件正在定位，但是我仍然没有得到任何结果，也没有错误。

谢谢

我试图让我的2个div(它们是并排的)在移动设备上观看时更改为堆叠的div,如小提琴中所示,但我希望"两个在顶部,"一个"在第二个.

这是代码 - http://jsfiddle.net/d3d4hb3t/

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

<div class="one">one</div>
<div class="two">two</div>

我知道简单的解决方案是交换第一个和第二个div,但由于我的代码很复杂,我希望只使用CSS有一个更简单的解决方案.

我正在尝试创建一个响应式网站,并且正在使用@media only screen and (max-width:...)&@media only screen and (min-width:...)尝试调整所有内容.

当@media在一个上使用多个时div,它似乎不起作用.

这里的小提琴将解释我想要做的事情.

HTML

<div class="mainNavi2">
  <p> test </p> 
</div>

CSS

@media only screen and (max-width: 800px) {
  .mainNavi2{
    border:1px solid orange; 
  }
}

@media only screen and (min-width: 851) {
  .mainNavi2{
    border:1px solid green;
  }
}

@media only screen and (max-width: 850) {
  .mainNavi2{
    border:1px solid blue;
  }
}

我基本上要做的是:

• 当屏幕为800px(或更低)时,将显示橙色边框
• 如果宽度为850px(或更小),将显示蓝色边框
• 如果宽度为851(或更多),将显示绿色边框.

它们都是分开工作的,但是当它们全部放在一起时,只有max-width:800px作品.