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

Question

因此，我通常不会遇到媒体查询方面的问题，但我正在集成来自单击维度的表单，并使用媒体查询进行样式设计。好消息是，最低的断点媒体查询正在加载，坏的是，当我通过dev工具检查时，其他人不在各自的视图中。

我已经检查了打字，我没有发现任何问题。希望一双新的眼睛能突出这个问题。

此外，奇怪的是，浏览器正在获取断点引用中的最小宽度之前的最大宽度。以前从没见过这个。

/*--- 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;
   }
}

​

Answer 2

关于“浏览器正在获取断点引用中的最小宽度之前的最大宽度”，请确保浏览器窗口没有缩放(可以使用Control/Command +0重置缩放设置并返回到标准的100%缩放)。