隐藏移动css的桌面显示

Question

我正在尝试为移动视图创建单独的页面，它应该被隐藏  桌面看到我的css和html在这段代码中有什么不对吗？

代码：

<form class="form-signin-login" method="post" id="login-form">
                    <input type="text" name="user_entered_id" id="user_entered_id" value="Email (or) Phone No" onblur="if(this.value=='') this.value='Email (or) Phone No'" onfocus="if(this.value =='Email (or) Phone No' ) this.value=''">
                     <input type="password" name="lgpassword" id="lgpassword" value="Password" onblur="if(this.value=='') this.value='Password'" onfocus="if(this.value =='Password' ) this.value=''">
                    <input type="submit" class="button" name="submit" value="Login">
            </form>

 <style>

body{
background-color:#000;} 
    @media screen and (max-width:300px) {

.input[type=text], .input[type=password]{width: 100%;
padding: 12px 20px;
background-color:#000;
color:#fff;
outline:none;
border: none;
border-bottom: 1px solid #fff;

margin: 8px 0;
-webkit-box-shadow: 0 0 0px 1000px black inset;
-webkit-text-fill-color: white !important;


  }
 }

    </style>    

Answer 1

您只需将以下内容添加到css

即可

.form-signin-login { display: none;} @media screen and (max-width:300px) { .form-signin-login { display: inline;} }

以下是工作示例：https://jsfiddle.net/6sz8rnb2/1/

Answer 2

@media添加min-width和max-width（用于mobil和桌面），隐藏使用属性可见性（值：visible | hidden | collapse | inherit |）;注意：页面上的所有其他元素不会更改位置。