Angular 2 个使用流体布局的网络应用程序不响应超过一种屏幕尺寸

Question

在这里，我正在使用 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;
 }
}

但在实际的浏览器中，'fullwidth' class 仅应用了 960 的媒体查询。

如何将媒体查询应用于 600 像素大小？

还有需要查询多少屏幕尺寸才能进行适当的响应式设计？

Answer 1

看看这是否对您有帮助：https://codepen.io/panchroma/pen/pLaJZy

请记住，所有适用的 CSS 规则都将应用于元素，并且 CSS 规则级联。对于您原来的 CSS，如果视口为 500 像素，则您的两个媒体查询都是正确的，因此最后一个将是要应用的样式。

而不是你原来的

@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 2 个使用流体布局的网络应用程序不响应超过一种屏幕尺寸

Angular 2 web app using fluid layout not responding to more than one screen sizes

fluid-layout

responsive-design

angular2-forms