Cómo aplicar CSS para cada PC / dispositivo móvil [WordPress]

2019/7/102021/7/28

1. Asumiendo tal situación
2. 方法
3. Referencia: ancho de la pantalla

Asumiendo tal situación

Quiero reflejar CSS solo en la pantalla de la PC / móvil
Cambié el diseño con CSS adicional, pero se colapsó en mi teléfono inteligente
Quiero configurar el relleno y el margen adecuados para dispositivos como teléfonos inteligentes / tabletas / PC
La cantidad de CSS que desea aplicar no es tanta

方法

Simplemente siga "@media screen", especifique el ancho de pantalla del dispositivo que desea reflejar con "y ()", e ingrese el código CSS en "{}".　

Reflejar solo en PC

@media pantalla y (ancho mínimo: 980px) {Ingrese CSS aquí}

Reflexiona solo en las tabletas

@media pantalla y (ancho mínimo: 481 px) y (ancho máximo: 979 px) {Ingrese CSS aquí}

Reflexiona solo en el móvil

@media pantalla y (ancho máximo: 480px) {Ingrese CSS aquí}

Solo PC y tableta o solo tableta y móvil

/ * PC y tableta * / pantalla @media y (ancho de mezcla: 481 px) {Ingrese CSS aquí} / * Tableta y móvil * / pantalla @media y (ancho máximo: 980 px) {Ingrese CSS aquí}

"ancho máximo: 480pxEl ancho de la pantalla esDispositivo de hasta 480 px = 480 px o menosSmartphone, etc.

viceversa"ancho mínimo: 980px"EsMínimo 980 px = 980 px o másLa computadora tiene un ancho de pantalla.

Solo PC y tableta

El ancho de la pantalla se describe en función de lo siguiente, que se aplica a la mayoría de los dispositivos.

スマホ	: 480 px o menos
Tableta	: 768 ~ 980 px
パソコン	: 980 px o más

Referencia: ancho de la pantalla

Si intenta inclinarlo hacia los lados en su teléfono inteligente, tendrá más de 480 px.Incluso en una computadora personal, si se muestra solo en la mitad de la pantalla, puede ser tan ancha como una tableta.

En iPhone, la siguiente imagen será una referencia para el tamaño de la pantalla. En CSS, el ancho de la pantalla espx (píxeles)Pero en el lado del dispositivopuntosTenga en cuenta que se expresa como.