Como aplicar CSS para cada PC / celular [WordPress]

2019 ano 7 mês 10 dia2021 ano 7 mês 28 dia

1. Supondo tal situação
2. 方法
3. Referência: largura da tela

Supondo tal situação

Quero refletir CSS apenas na tela do PC / celular
Mudei o design com CSS adicional, mas ele caiu no meu smartphone
Quero definir o preenchimento e a margem adequados para dispositivos como smartphones / tablets / PCs
O número de CSS que você deseja aplicar não é tantos

方法

Basta seguir "@media screen", especificar a largura da tela do dispositivo que deseja refletir com "e ()" e inserir o código CSS em "{}".　

Refletir apenas no PC

@media screen e (min-width: 980px) {Enter CSS here}

Refletir apenas em tablets

@media screen and (min-width: 481px) e (max-width: 979px) {Enter CSS here}

Reflita apenas no celular

@media screen e (max-width: 480px) {Enter CSS here}

Apenas PC e tablet ou apenas tablet e celular

/ * PC e tablet * / @media screen e (mix-width: 481px) {Enter CSS here} / * Tablet e celular * / @media screen and (max-width: 980px) {Enter CSS here}

「largura máxima: 480pxA largura da tela éDispositivo de até 480 px = 480 px ou menosSmartphone etc.

vice-versa"largura mínima: 980 px"Mínimo 980 px = 980 px ou maisO computador tem uma largura de tela.

PC e tablet apenas

A largura da tela é descrita com base no seguinte, que se aplica à maioria dos dispositivos.

Smartphone	: 480 px ou menos
Tablet	: 768 ~ 980 px
PC	: 980 px ou mais

Referência: largura da tela

Se você tentar incliná-lo para o lado em seu smartphone, ele terá mais de 480 px.Mesmo em um computador pessoal, se for exibido em apenas metade da tela, pode ser tão largo quanto um tablet.

No iPhone, a imagem a seguir será uma referência para o tamanho da tela. Em CSS, a largura da tela épx (pixels)Mas do lado do dispositivopontosObserve que é expresso como.