输入字段（文本字段）用于移动设备的CSS样式

Question

在我的登录页面中，我使用@media only screen and (orientation: portrait)来检测移动视图。我不想显示交叉签名区域（class =＆＃34; sidebar＆＃34;）。当我第一次加载页面时，这样可以正常工作，如 picture 2 。但是当我尝试在文本字段中输入内容时，所有内容都会像 图片1 一样混乱（虽然我使用了display: none，但侧栏类中的元素显示出来。我想要只显示登录页面（class =＆＃34; container＆＃34;）。我的CSS演示如下...

@media only screen and (orientation: portrait){
  .sidebar {
    display: none;
  }
  .container {
    width: 100%;
  }
}

我该怎么做？

Answer 1

请勿尝试@media only screen and (orientation: portrait)尝试@media only screen and (max-width:480px)并查看是否有效