Responsive @ Media-Abfrage, um Stil Deklarationen zu entfernen

Question

Ich bin nicht vertraut mit @media Abfragen, und was ich versuche zu erreichen ist eine responsive Entfernung/Änderung von bestimmten CSS, wenn die Browser-Anzeige unter eine bestimmte Auflösung geschrumpft ist, oder a Das Mobilgerät, das die Seite anzeigt, liegt ebenfalls unter der angegebenen Auflösung.

Ich brauche .sidefloat: left; position: fixed; width: 150px; zu entfernen, wenn unter 500px Breite Auflösung und .mainborder-left: 1px solid #000; margin: 0 0 0 170px;

.side { 
    display: block; 
    float: left; 
    overflow: hidden; 
    position: fixed; 
    width: 150px; 
} 

.main { 
    border-left: 1px solid #000; 
    margin: 0 0 0 170px; 
} 

Jede Hilfe oder Erklärung geschätzt zu entfernen.

Answer 1

Auf diese Weise können Sie tun dies

@media only screen and (max-width: 500px) { 

    .side { 
     float: none; 
     position: static; 
     width: auto; 
    } 

    .main { 
     border-left:0; 
     margin: 0; 
    } 
} 

Answer 2

.side { 
    display: block; 
    float: left; 
    overflow: hidden; 
    position: fixed; 
    width: 150px; 
} 

.main { 
    border-left: 1px solid #000; 
    margin: 0 0 0 170px; 
    width: auto; 
} 
@media only screen and (max-device-width : 500px) { 
    .side { 
    float: none; 
    position: static; 
    width: auto; 
    } 
    .main { 
    border: 0; 
    margin: 0; 
    } 
}