Einstellung für mobile Responsive-Designs im Hoch- und Querformat

Question

Ich arbeite in mobilen Responsive Designs, in denen es sowohl im Hoch- als auch im Querformat funktioniert.

Ich habe wie unten angegeben, um den Stil zu überschreiben.

@media (max-width: 360px) { 
    #footer { 
     .dropdown-menu { 
       left: 33% !important; 
      } 
    } 

@media (max-width: 480px) { 
    #footer { 
     .dropdown-menu { 
       left: 27% !important; 
      } 
    } 


@media (max-width: 320px) { 
    #footer { 
     .dropdown-menu { 
       left: 13% !important; 
      } 
    } 
@media (max-width: 767px) { 
    #footer { 
     .dropdown-menu { 
       left: 18% !important; 
      } 
    } 

Aber das funktioniert nicht, für 320 Breite, 767 linken Stil gilt.

Bitte schlagen Sie mir vor, wie Sie dies verwenden, um im mobilen Gerät im Hoch- und Querformat zu arbeiten?

Answer 1

Sie haben den Auftrag von der höchsten Breite auf die niedrigsten wie diese invertieren:

@media (max-width: 767px) { 
    #footer { 
     .dropdown-menu { 
      left: 18%; 
     } 
    } 
} 

@media (max-width: 480px) { 
    #footer { 
    .dropdown-menu { 
      left: 27%; 
     } 
    } 
} 
@media (max-width: 360px) { 
    #footer { 
    .dropdown-menu { 
      left: 33%; 
     } 
    } 
} 
@media (max-width: 320px) { 
    #footer { 
    .dropdown-menu { 
      left: 13%; 
     } 
    } 
} 

Außerdem glaube ich, es ist besser, nicht !important zu verwenden, um Eigenschaften zu überschreiben, sondern mit Selektoren zu spielen.