Heim > Web-Frontend > CSS-Tutorial > Wie wende ich responsive CSS-Stile ausschließlich auf Mobilgeräte an?

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

Susan Sarandon
Freigeben: 2024-10-30 04:07:28
Original
693 Leute haben es durchsucht

How to Apply Responsive CSS Styles Exclusively to Mobile Devices?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage