Come applicare CSS per ogni PC / dispositivo mobile [WordPress]

2019 年 7 月 10 日

Supponendo una situazione del genere

  • Voglio riflettere CSS solo sullo schermo del PC o del cellulare
  • Ho cambiato il design con CSS aggiuntivi, ma è crollato sul mio smartphone
  • Voglio impostare la spaziatura interna e il margine adatti a dispositivi come smartphone / tablet / PC
  • Il numero di CSS che vuoi applicare non è così alto

方法

Basta seguire "@media screen", specificare la larghezza dello schermo del dispositivo che si desidera riflettere con "e ()" e inserire il codice CSS in "{}". 

  • Rifletti solo su PC
@media screen e (larghezza minima: 980 px) {Enter CSS here} 
  • Rifletti solo sui tablet
@media screen and (min-width: 481px) and (max-width: 979px) {Enter CSS here} 
  • Rifletti solo sui dispositivi mobili
@media screen e (larghezza massima: 480 px) {Enter CSS here} 
  • Solo PC e tablet o solo tablet e dispositivi mobili
/ * PC e tablet * / schermo @media e (larghezza mista: 481 px) {Enter CSS here} / * Tablet and mobile * / @media screen and (max-width: 980px) {Enter CSS here} 

larghezza massima: 480 pxLa larghezza dello schermo èDispositivo fino a 480 px = 480 px o menoSmartphone ecc.

vice versa"larghezza minima: 980 px"Io sono,Minimo 980 px = 980 px o piùIl computer ha una larghezza dello schermo.

  • Solo PC e tablet

La larghezza dello schermo è descritta in base a quanto segue, che si applica alla maggior parte dei dispositivi.

Telefono intelligente : 480 px o inferiore
Tavoletta : 768 ~ 980 px
PC: 980 px o più

Riferimento: larghezza dello schermo

Se provi a inclinarlo lateralmente sul tuo smartphone, sarà oltre 480 px.Anche su un personal computer, se viene visualizzato solo su una metà dello schermo, potrebbe essere largo quanto un tablet.

Su iPhone, l'immagine seguente sarà un riferimento per le dimensioni dello schermo. In CSS la larghezza dello schermo èpx (pixel)Ma dal lato del dispositivopuntiSi prega di notare che è espresso come.

Immagine: estratto parziale dalla fonte La guida definitiva alle risoluzioni per iPhone

Ad esempio, l'iPhone X
punto: 375 x 812
pixel: 1125 x 2436

Tuttavia, la larghezza specificata da CSS è 375.