So wenden Sie CSS für jeden PC / jedes Handy an [WordPress]

2019/7/102021/7/28

Inhaltsverzeichnis

1. Eine solche Situation annehmen
2. 方法
3. Referenz: Bildschirmbreite

Eine solche Situation annehmen

Ich möchte CSS nur auf dem PC / mobilen Bildschirm wiedergeben
Ich habe das Design mit zusätzlichem CSS geändert, aber es ist auf meinem Smartphone zusammengebrochen
Ich möchte die Polsterung und den Rand so einstellen, dass sie für Geräte wie Smartphones / Tablets / PCs geeignet sind
Die Anzahl der CSS, die Sie anwenden möchten, ist nicht so hoch

方法

Folgen Sie einfach "@media screen", geben Sie die Bildschirmbreite des Geräts an, das Sie mit "und ()" wiedergeben möchten, und geben Sie den CSS-Code in "{}" ein.　

Nur auf dem PC reflektieren

@ Media-Bildschirm und (Mindestbreite: 980 Pixel) {Geben Sie hier CSS ein}

Nur auf Tabletten reflektieren

@media screen und (min-width: 481px) und (max-width: 979px) {Geben Sie hier CSS ein}

Nur auf dem Handy reflektieren

@ Media-Bildschirm und (maximale Breite: 480 Pixel) {Geben Sie hier CSS ein}

Nur PC und Tablet oder nur Tablet und Handy

/ * PC und Tablet * / @media Bildschirm und (Mischbreite: 481px) {CSS hier eingeben} / * Tablet und Handy * / @media Bildschirm und (maximale Breite: 980px) {CSS hier eingeben}

"maximale Breite: 480pxDie Bildschirmbreite beträgtBis zu 480 px Gerät = 480 px oder wenigerSmartphone etc.

und umgekehrt"Mindestbreite: 980px""Mindestens 980 px = 980 px oder mehrDer Computer hat eine Bildschirmbreite.

Nur PC und Tablet

Die Bildschirmbreite wird anhand der folgenden Informationen beschrieben, die für die meisten Geräte gelten.

Smartphone	: 480 px oder weniger
Tablette	: 768 ~ 980 px
PC	: 980 px oder mehr

Referenz: Bildschirmbreite

Wenn Sie versuchen, es auf Ihrem Smartphone zur Seite zu neigen, beträgt es mehr als 480 Pixel.Selbst auf einem PC kann es so breit wie ein Tablet sein, wenn es nur auf einer Hälfte des Bildschirms angezeigt wird.

Auf dem iPhone dient das folgende Bild als Referenz für die Bildschirmgröße. In CSS ist die Bildschirmbreitepx (Pixel)Aber auf der GeräteseitePunkteBitte beachten Sie, dass es ausgedrückt wird als.