隱藏的桌面顯示爲移動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添加最小寬度和最大寬度（適用於美孚和桌面），隱藏使用屬性可見性（值：visible |隱藏|崩潰| inherit |）;注意：頁面上的所有其他元素不會改變它們的位置。