How to apply CSS for each PC / mobile [WordPress]

2019/7/102021/7/28

table of contents

1. Assuming such a situation
2. method
3. Reference: Screen width

Assuming such a situation

I want to reflect CSS only on either the PC / mobile screen
I changed the design with additional CSS, but it collapsed on my smartphone
I want to set padding and margin suitable for devices such as smartphones / tablets / PCs
The number of CSS you want to apply is not so many

method

Just follow "@media screen", specify the screen width of the device you want to reflect with "and ()", and enter the CSS code in "{}".　

Reflect only on PC

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

Reflect only on tablets

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

Reflect only on mobile

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

PC and tablet only or tablet and mobile only

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

"max-width: 480pxThe screen width isUp to 480 px device = 480 px or lessSmartphone etc.

vice versa"min-width: 980px"Minimum 980 px = 980 px or moreThe computer has a screen width.

PC and tablet only

The screen width is described based on the following, which applies to most devices.

smartphone	: 480 px or less
Tablet	: 768 ~ 980 px
computer	: 980 px or more

Reference: Screen width

If you try to tilt it sideways on your smartphone, it will be over 480 px.Even on a personal computer, if it is displayed on only one half of the screen, it may be as wide as a tablet.

On iPhone, the following image will be a reference for screen size. In CSS the screen width ispx (pixels)But on the device sidepointsPlease note that it is expressed as.