不知道是否有人可以在这里帮助我，但我在媒体查询方面遇到了一些问题。所以我设置了一个表单，并在CSS中使用媒体查询将其显示在手机上。当我在手机上选择输入元素时，一切看起来都应该如此，但是可以显示隐藏的图像。默认情况下，加载页面时，它不会显示隐藏的图像，这是应该工作的方式，但是在单击输入元素以登录后，我会在表单中看到该图像。关于我在做什么错的任何建议？
@media screen and (max-width: 480px) and (orientation: portrait){
.login-lock-ico{display: none!important;
}
}
的HTML：
<form id="login_form" action="index.php" method="POST">
<div class="login-conntainer">
<div class="login-lock-ico">
<img src="images/login/lock.png" alt="login lock"/>
</div>
<div class="login-form">
<div class="login-txt">User Login</div>
<div class="login-control">
<input class="login-input" type="text" name="login" placeholder="Username"/>
</div>
<div class="login-control">
<input class="login-input" type="password" name="password" placeholder="Password"/>
</div>
<div class="login-control">
<input id="rememner_me" type="checkbox" class="css-checkbox" name="remember_me_opt" value="">
<label for="rememner_me" name="cust_email_label" class="css-label"> Remember Me</label>
</div>
</div>
</div>
</form>
我也将浏览器的大小调整为可移动宽度，并且显示正确。只是在物理电话上遇到问题。
理想情况下，这应该在输入焦点上不可见，但是您可以尝试以下一种方法：
@media only screen and (max-width: 480px) and (orientation: portrait){
.login-lock-ico{display: none!important; height:1px; overflow:hidden}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句