Comment appliquer CSS pour chaque PC / mobile [WordPress]

2019er mars 72021er mars 7

1. En supposant une telle situation
2. 方法
3. Référence: largeur de l'écran

En supposant une telle situation

Je veux refléter le CSS uniquement sur l'écran du PC / mobile
J'ai changé le design avec du CSS supplémentaire, mais il s'est effondré sur mon smartphone
Je souhaite définir un rembourrage et une marge adaptés aux appareils tels que les smartphones / tablettes / PC
Le nombre de CSS que vous souhaitez appliquer n'est pas si grand

方法

Suivez simplement "@media screen", spécifiez la largeur d'écran de l'appareil que vous souhaitez refléter avec "et ()", et entrez le code CSS dans "{}".　

Réfléchir uniquement sur PC

@media screen et (min-width: 980px) {Entrez CSS ici}

Réfléchissez uniquement sur les tablettes

@media screen et (min-width: 481px) et (max-width: 979px) {Entrez CSS ici}

Réfléchissez uniquement sur mobile

@media screen et (max-width: 480px) {Entrez CSS ici}

PC et tablette uniquement ou tablette et mobile uniquement

/ * PC et tablette * / Écran @media et (mix-width: 481px) {Entrez CSS ici} / * Tablette et mobile * / Écran @media et (max-width: 980px) {Entrez CSS ici}

「largeur maximale: 480pxLa largeur de l'écran estAppareil jusqu'à 480 px = 480 px ou moinsSmartphone, etc.

vice versa"largeur min: 980px"Minimum 980 px = 980 px ou plusL'ordinateur a une largeur d'écran.

PC et tablette uniquement

La largeur de l'écran est décrite en fonction de ce qui suit, qui s'applique à la plupart des appareils.

Smartphone	: 480 px ou moins
Tablette	: De 768 à 980 px
PC	: 980 px ou plus

Référence: largeur de l'écran

Si vous essayez de l'incliner latéralement sur votre smartphone, il fera plus de 480 px.Même sur un ordinateur personnel, s'il n'est affiché que sur la moitié de l'écran, il peut être aussi large qu'une tablette.

Sur iPhone, l'image suivante sera une référence pour la taille de l'écran. En CSS, la largeur de l'écran estpx (pixels)Mais du côté de l'appareildes notes bonusVeuillez noter qu'il est exprimé sous la forme.