Wenden Sie CSS-Regel nur auf Computerbildschirmen an, nicht auf Handy und Tablet

Question

Ich habe ein Logo in meiner Kopfzeile, das zu klein ist. Ich habe diesen Code gefunden, mit dem ich die Größe vergrößern kann, aber ich möchte nur, dass er auf Computerbildschirme und nicht auf Mobilgeräte oder Tablets angewendet wird. Der Code ist:

.site-title img {max-width:100%; height:auto} 
.site-description {display:none} 

ich die 100%-200% aber nur auf Computerbildschirmen ändern möchten.

Kann mir jemand sagen, welcher Code das passiert?

Answer 1

Responsive Web Design, Verwendung von Medien-Anfragen:

@media screen and (min-width: 800px) { 
    // this css will only be used when the screen size is min 800px 
} 

Answer 2

Haben Sie versucht:

.site-title img { 
    max-width:100%; 
    width:0 auto; 
    height:0 auto; 
} 

Sie es auch auf Handy-Bildschirme passen versuchen zu machen oder ich habe dich nicht gut verstanden.

Answer 3

Media Queries werden verwendet, um CSS-Regeln nur passende Geräte. Geben Sie max-width oder min-width an, um die Stilregeln anzuwenden.

@media screen and (min-width: 720px) { 
    body { 
     background-color: skyblue; 
    } 
}