Wie wende ich responsive CSS-Stile ausschließlich auf Mobilgeräte an?

Responsive CSS-Stile ausschließlich auf Mobilgeräten anwenden

Beim Erstellen responsiver CSS-Stile ist es wichtig sicherzustellen, dass sie nur auf die vorgesehenen Geräte angewendet werden. Wenn Sie auf mobile Geräte abzielen, aber Schwierigkeiten haben, zu verhindern, dass diese die Desktop-Präsentation stören, sollten Sie den folgenden Ansatz in Betracht ziehen.

Verwendung von Medienabfragebereichen

Anstatt einzelne Medienabfrage-Haltepunkte zu verwenden, verwenden Sie diese eine Reihe von Haltepunkten. Dadurch können Sie bestimmte Breitenbereiche angeben, für die die mobilen Stile gelten sollen, während andere Geräte ausgeschlossen werden.

Hier ist ein Beispiel für einen Medienabfragebereich, der auf Geräte mit Breiten zwischen 480 Pixel und 1024 Pixel abzielt:

<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles go here */
}</code>

Bereiche für gängige Gerätegrößen definieren

Um die gängigsten Gerätegrößen abzudecken, berücksichtigen Sie die folgenden Bereiche:

<code class="css">@media all and (min-width: 0px) and (max-width: 320px)
@media all and (min-width: 321px) and (max-width: 480px)
@media all and (min-width: 569px) and (max-width: 768px)
@media all and (min-width: 769px) and (max-width: 800px)
@media all and (min-width: 801px) and (max-width: 959px)
@media all and (min-width: 960px) and (max-width: 1024px)</code>

Verwendung von EM- oder %-Einheiten

Um sicherzustellen Ihre Stile lassen sich unabhängig von der Geräteauflösung gut skalieren. Vermeiden Sie die Verwendung von px-Einheiten. Entscheiden Sie sich stattdessen für EM- oder %-Einheiten. EM-Einheiten sind relativ zur Schriftgröße des übergeordneten Elements, während %-Einheiten relativ zur Gesamtbreite des Elements sind.

Codebeispiel

Hier ist eine aktualisierte Version Ihres Codes unter Verwendung der Medien Abfragebereichsansatz und EM-Einheiten:

<code class="css">/* Regular desktop styles */

/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles using EM units */
}</code>

Dieser Code stellt sicher, dass die mobilen Stile ausschließlich auf Geräte innerhalb des angegebenen Breitenbereichs angewendet werden, während die Trennung von Desktop-Stilen gewahrt bleibt.

Das obige ist der detaillierte Inhalt vonWie wende ich responsive CSS-Stile ausschließlich auf Mobilgeräte an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!