Question

我有以下SCSS样式表

.Header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  z-index: 999;
  display: flex;
  justify-content: space-between;

  @media screen and (max-width: 900px) {
    flex-flow: column wrap;
  }

  @media screen and (max-width: 565px) {
    flex-flow: column;
    justify-content: stretch;
  }

  &__Nav {
    display: flex;
    flex-flow: row;
    position: relative;
    margin: auto;
    justify-content: space-around;

    @media screen and (max-width: 565px) {
      flex-flow: column;
    }

    &--left { order: 0; }

    &--right { order: 2; }
  }

  &__Logo {
    display: flex;
    flex-flow: row;
    position: relative;
    margin: auto;
    order: 1;

    @media screen and (max-width: 900px) {
      order: 0;
    }
  }
}

媒体查询存在于已编译的代码中，但是似乎没有应用，因为在调整窗口大小时，flex-flow属性的更改以及项目顺序的更改都没有。什么会导致此问题？

更新-我已经更新了链接中的SCSS和已编译的代码。尽管如此，它仍无法按预期工作。

更新2 -问题已解决，链接已删除。只是我的班上有问题。

Answer 1

您的webpack配置很好。媒体查询位于第75行：https://pastebin.com/CcTQy39W

Thread-116 (HornetQ-client-global-threads-1530142454) - priority:10 - threadId:0x00007f7e34065000 - nativeId:0x75aa - state:BLOCKED
stackTrace:
java.lang.Thread.State: BLOCKED (on object monitor)
at com.sshtools.j2ssh.transport.TransportProtocolCommon.sendMessage(Unknown Source)
- waiting to lock <0x0000000600164f20> (a com.sshtools.j2ssh.transport.TransportProtocolClient)
at com.sshtools.j2ssh.transport.TransportProtocolCommon.sendDisconnect(Unknown Source)
at com.sshtools.j2ssh.transport.TransportProtocolCommon.disconnect(Unknown Source)
at com.sshtools.j2ssh.SshClient.disconnect(Unknown Source)
at com.test.server.protocol.communication.MyNetconfSession.close(MyNetconfSession.java:106)

从SCSS使用Webpack编译后，媒体查询不起作用

1 个答案: