モバイル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

あなただけここ

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

をCSSに以下を追加する必要があり、作業のサンプルです：https://jsfiddle.net/6sz8rnb2/1/

Answer 2

@media min-widthとmax-width（mobilとdesktop用）を追加し、使用プロパティの表示を非表示にします（値：visible |隠された| | inherit |）;注意：ページ上の他のすべての要素は、位置を変更しません。