在移动视图上遇到 CSS 格式问题

Question

当我在移动设备上查看我的 React 应用时，右侧总是有额外的空间：

https://dsousadev.github.io/23imgs/

当我使用开发工具模拟移动视图时，我看不到这个额外的空间，但是当我在各种移动浏览器上查看该网站时，空间就在那里，并且应用程序无法自动适应。

这是我的媒体查询中的当前 CSS：

@media all and (max-width: 414px) {
  .ImageCard,
  #CardImage {
     width: 314px;
  }
  #CardImage {
    height: 314px;
  }
  ul {
    font-size: 1.2rem;
    padding: 0 15px;
  }
}

Answer 1

元素 <input accept="image/*" name type="file"> 导致问题。

如果我将display: none 应用到.fileContainer input，空间就会消失。

编辑

好的，所以进一步研究这个问题，看起来semantic.min.css 正在将font-size: 100% 应用到button, input, optgroup, select, textarea。这会导致您的输入变大（这是visible 时的输入）：

如果我们禁用font-size: 100%，输入会正确呈现：

之后，您的原始样式将起作用：

所以display: none 或恢复font-size 将起作用:)