如何按设备尺寸控制Input标签显示？平板适配CSS问题求助

你遇到的核心问题是媒体查询的逻辑错误：你写的@media (max-width:768px) and (min-width:1024px)是矛盾的——没有屏幕宽度能同时小于等于768px且大于等于1024px，所以这段样式永远不会触发。

下面给你两种可行的解决思路，以及更清晰的整体样式优化方案：

方案一：默认隐藏平板input，仅在目标尺寸显示 #

先把.tablet默认隐藏，再在768px-1024px的范围内设置它显示：

/* 默认隐藏平板输入框 */
.tablet {
  display: none;
}

/* 仅在平板尺寸（768px-1024px）显示 */
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet {
    display: block; /* 可根据布局需求改为inline/inline-block等 */
  }
}

方案二：默认显示平板input，非目标尺寸隐藏 #

如果希望平板input默认显示，只在小屏（<768px）和大屏（>1024px）时隐藏：

/* 默认显示平板输入框 */
.tablet {
  display: block;
}

/* 移动端（≤767px）隐藏平板input */
@media (max-width: 767px) {
  .tablet {
    display: none;
  }
}

/* 桌面端（≥1025px）隐藏平板input */
@media (min-width: 1025px) {
  .tablet {
    display: none;
  }
}

更清晰的整体样式优化 #

把不同设备断点的样式集中管理，比分散在各个类里更容易维护：

/* 移动端（屏幕≤767px） */
@media (max-width: 767px) {
  .desktop { display: none; }
  .tablet { display: none; }
  .mobile { display: block; }
}

/* 平板端（768px ≤ 屏幕 ≤1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  .desktop { display: none; }
  .tablet { display: block; }
  .mobile { display: none; }
}

/* 桌面端（屏幕≥1025px） */
@media (min-width: 1025px) {
  .desktop { display: block; }
  .tablet { display: none; }
  .mobile { display: none; }
}

内容的提问来源于stack exchange，提问作者RoboUser