Ich habe HTML-Div mit einer Breite von 190 px, das für den Desktop normal funktioniert, aber für Handys nicht. Gibt es eine Möglichkeit zu erkennen, ob die Verbindung vom Desktop hergestellt wird? Nehmen Sie diesen Wert, sonst nehmen Sie diesen Wert?

Das ist mein Code:

document.querySelector('.article').style.width ='190px';
0
salmanaacvf 18 Jän. 2019 im 15:09

3 Antworten

Beste Antwort

In Ihrer CSS-Datei

// Desktop
.article {
    width: 100px;
}


// Mobile
@media only screen and (max-width: 768px) {
    .article {
        width: 50px;
    }
}

Dies sind Medienabfragen .

In den ersten Zeilen gibt es keine Einschränkungen, aber dann überschreiben Sie den aktuellen Wert NUR , wenn die Bildschirmbreite kleiner als 768px

6
Eugenio Valeiras 18 Jän. 2019 im 12:18

Verwenden Sie einfach Medienabfragen. Dies ist die beste Option, um die Dinge reaktionsschnell zu machen. Andernfalls können Sie einen Blick auf die Flexbox werfen, die fantastisch ist a>

0
Arjun Singh 18 Jän. 2019 im 12:35

Verwenden Sie Medienabfragen

Verwenden eines Haltepunkts von 576px zielt auf alle Arten von Mobilgeräten ab.

// This is the default size
.article {
   width: 100px;
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  width: 200px;
}

Die andere Antwort zielt auch auf Tablets ab. Wenn Sie jedoch nur auf Mobilgeräte abzielen möchten, verwenden Sie meine Lösung.

0
mahan 18 Jän. 2019 im 13:50