以角度添加涉及标志和媒体查询的类答案

【问题标题】：To add a class involving a flag and media query in angular以角度添加涉及标志和媒体查询的类
【发布时间】：2020-02-17 11:57:42
【问题描述】：

我想根据标志和屏幕分辨率添加类我试过了

[ngClass]="singleFloorFlagStyle ? 'floorPlanContainerWidth' : 'singleFloor'"

 @media only screen and (min-width: 1500){
.floorPlanContainerWidth{
 width: 670px;
 }
}

 @media only screen and (max-width: 1400){
.floorPlanContainerWidth{
width: 613px !important;
}
}

.singleFloor{
width: 1300px;
}

singleFloorFlagStyle 我会收到真或假。所以 singleFloor 类被应用但 floorPlanContainerWidth 类没有。我怎样才能使媒体查询类工作。

我已经提到了这个Angular 5: Use ngClass to switch classes for mobile and desktop views，但我想我的情况不同

【问题讨论】：

你的问题是类本身没有被应用还是类的样式没有被应用？因为现在你在 1400 到 1500 之间有一个 100px 的“死区”，floorPlanContainerWidth 类不会应用任何样式。
@Chrillewoodz 类本身没有被应用，谢谢
.. 你确定singleFloorFlagStyle 是真的吗？
是的 :) 因为 singleFloor 类被应用了，所以 flag 正在工作

标签： html angular sass

【解决方案1】：

试试这个

[ngClass]="{'floorPlanContainerWidth' : singleFloorFlagStyle , 'singleFloor' : !singleFloorFlagStyle }"

如果要设置 floorPlanConatainerWidth 的初始大小。因此，即使它不在媒体查询比率中，也会应用样式。然后你还必须在媒体查询之外添加类并在那里定义一些宽度

.floorPlanConatainerWidth{
  // Initially set width without media queries
}

@media ...

【讨论】：

不，它不能解决，我检查了 1100, 1200, 1230 ，差异组合
你的类在哪个文件中出现
对不起我的不好没有用px

【解决方案2】：

你还没有添加px所以floorPlanContainerWidth没有申请

 @media only screen and (min-width: 1500px){
   .floorPlanContainerWidth{
     width: 670px;
   }
 }

 @media only screen and (max-width: 1400px){
   .floorPlanContainerWidth{
      width: 613px !important;
   }
 }

.singleFloor{
   width: 1300px;
}

【讨论】：

@Enthu 没关系
@Enthu 是的，我当然会尝试