Responsywna kwerenda @media do usunięcia deklaracji stylu

Question

Nie jestem zaznajomiony z zapytaniami @media, a to, co próbuję osiągnąć, to responsywne usuwanie/modyfikacja niektórych stylów CSS, gdy przeglądarka jest zmniejszana poniżej określonej rozdzielczości lub urządzenie mobilne wyświetlające stronę również znajduje się poniżej tej samej określonej rozdzielczości.

muszę .side usunąć float: left; position: fixed; width: 150px; przy rozdzielczości poniżej 500px szerokości i .main usunąć border-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; 
} 

Każda pomoc lub wyjaśnienie jest doceniana.

Answer 1

w ten sposób można to zrobić

@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; 
    } 
}