CSS 媒体查询以错误的顺序加载并回到前面 - 很奇怪

Question

所以我通常不会遇到媒体查询的问题，但我正在使用媒体查询从点击维度和响应式样式中集成表单。好消息是最低断点媒体查询正在加载，坏消息是当我通过开发工具检查时，其他媒体查询不在各自的视口(viewport)中。

我检查了拼写错误，没有发现任何错误。希望一双新的眼睛可以突出这个问题。

同样奇怪的是，浏览器在断点引用中选择了最小宽度之前的最大宽度。以前从未见过。

/*--- PIXEL 2 ---*/
@media only screen and (min-width: 376px) and (max-width: 411px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:350px!important;
   }
}


/*--- IPHONE X -6-7-8 STYLE ---*/
@media only screen and (min-width: 361px) and (max-width: 375px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:312px!important;
   }
}

/*--- Galaxy S5 ---*/
@media only screen and (min-width: 321px) and (max-width: 360px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:300px!important;
   }
} 

/*--- IPHONE 5 - SE ---*/
@media only screen and (max-width: 320px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:259px!important;
   }
}

Answer 1

CSS 中的 min-width 不是必需的。

如果您想针对实际设备屏幕宽度，请尝试使用 max-device-width

/*--- PIXEL 2 ---*/
@media only screen and (max-width: 411px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:350px!important;
   }
}


/*--- IPHONE X -6-7-8 STYLE ---*/
@media only screen and (max-width: 375px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:312px!important;
   }
}

/*--- Galaxy S5 ---*/
@media only screen and (max-width: 360px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:300px!important;
   }
} 

/*--- IPHONE 5 - SE ---*/
@media only screen and (max-width: 320px) {
  .clickdform input[type='text'],
  .clickdform textarea,
  .clickdform select{
      min-width:259px!important;
   }
}