html - 使用CSS处理媒体查询

我有这种问题：
我的css文件中有两个媒体查询，它们是由视口的高度应用的，因为两部手机的宽度都相同，但是我在html中有一个输入，因此当我单击它并打开键盘时，视口的高度会减小，第二个查询也适用。这是代码段。无论键盘是否打开，我都希望在iphone 5上应用第一个查询。

#div{
  height: 20px;
}

@media(max-height: 568px) and (max-width: 320px){
  /*e.g iphone 5*/
  #div{
    background-color: red;
  }
}

@media(max-height: 480px) and (max-width: 320px){
  /*e.g iphone 4*/
  #div{
    background-color: blue;
  }
}

<html>
<head>
  <title>Responsive</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <input id="inp"/>
  <div id="div"></div>
</body>
</html>

使用CSS处理媒体查询

0 个答案: