Responsive design Angular 2 web应用程序使用流体布局，不响应多个屏幕尺寸

在这里，我使用Angular 2框架创建一个新的web应用程序，并应用媒体查询以实现响应。我不熟悉这种设计。我使用了两个屏幕断点，即600和960，并尝试相应地测试响应性。但我的一个查询没有得到应用，即600px。 这是我的密码

@media screen and (max-width: 600px) {
mat-card{
    width:50%;
     height:60%;
    margin:9% 9% 9% 19%;
       font-size:8px;
      }

 .fullwidth{
  width:50%;
  height:50%;
  font-size:11px;
  padding:10px;
 }
 mat-card-title{
   font-size:13px;
   font-weight:bold;
 }
 mat-card-subtitle{
  font-size:11px;
 }
}

    @media screen and (max-width: 960px) {
    mat-card{
    width:50%;
     height:60%;
    margin:9% 9% 9% 19%;
       font-size:8px;
      }

 .fullwidth{
  width:90%;
  height:50%;
  font-size:11px;
  padding:10px;
 }
 mat-card-title{
   font-size:13px;
   font-weight:bold;
 }
 mat-card-subtitle{
  font-size:11px;
 }
}

但在实际的浏览器中，只有960的媒体查询应用于

'fullwidth'

类

如何将媒体查询应用于600px大小

还需要查询多少屏幕尺寸才能进行正确的响应设计？

看看这是否有助于您：

请记住，所有适用的CSS规则都将应用于一个元素，并且CSS规则层叠。对于原始CSS，如果视口为500px，则两个媒体查询将为真，因此最后一个将是应用的样式

而不是你原来的

@media screen and (max-width: 600px) {   
...  
}  
@media screen and (max-width: 960px) {  
 ...  
}  

考虑如下情况

@media screen and (max-width: 600px) {   
 ...  
 }  
 @media screen and (min-width:601px) and (max-width: 960px) {  
 ...  
 }    

使用上述CSS，如果视口为500px，则应用第一个媒体查询；如果视口为700px，则应用第二个媒体查询

---

希望这有帮助

我将angular flex库用于我的应用程序。它让您通过html属性应用flexbox，非常有用。另外，为了回答您最初的问题，我相信您希望在查询中使用最小宽度，不是最大宽度下面哪一个是最好的选择：1：将@mediaquery应用于CSS或2：使用Flex布局库你能给我提供Flex布局的详细信息及其实现细节的链接吗？我喜欢Flex布局，因为我讨厌编写媒体查询。我建议你两个都试试，看看你个人的喜好是什么。