Bootstrap 3 Anwenden unterschiedlicher CSS auf Mobile und Computer

Question

Ich verwende einen Bootstrap 3, habe ein div Element mit classouter und möchte verschiedene css auf Handy und Computer anwenden.

Zum Beispiel, das ist mein CSS-Codes:

/* for computer */ 
div.outer { 
    height: calc(100vh - 80px); 
    padding: 0; 
    margin: 0; 
    min-height: 500px 
} 


/* for mobile */ 
div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
} 

Wie kann ich es umsetzen? Danke für Anregungen.

Answer 1

Use media query for mobile devices. below is template, dont forgot to add mobile meta tag. 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 570px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    //your css for mobile is here 
} 

Answer 2

Für mobile haben Sie tp Breite des Geräts in '@media' Abfragen definieren.

767px ist eine Standardbreite von Bildschirm für mobile und Tablets. So können Sie wie diese verwenden

@media all and (max-width:768px){ 
    // your css for mobile 
} 

wird diese CSS gelten nur, wenn Sie die Gerätebreite 768px sein oder weniger

Answer 3

würde ich empfehlen, Medien-Anfragen für diese verwenden. Um die div.outer Klasse zu ändern, wenn Sie im Handy den folgenden Code verwenden.

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
} 
} 

Weitere Medien abfragt here