PC/모바일마다 CSS를 적용하는 방법 【WordPress】

2019/7/10

이런 상황을 상정

  • PC / 모바일 화면 중 하나에만 CSS를 반영하고 싶습니다.
  • 추가 CSS로 디자인을 변경했지만 스마트 폰이라고 무너졌습니다.
  • 스마트 폰 / 태블릿 / PC 등 장치에 맞는 padding 및 margin을 설정하고 싶습니다.
  • 적용하려는 CSS의 수는 그리 많지 않습니다.

方法

@media screen에 이어 "and ()"에 반영하고 싶은 장치의 화면 폭을 지정하고 "{}"에 CSS 코드를 입력하면됩니다.　

  • PC만 반영
@media screen and (min-width: 980px) { 여기에 CSS 입력 }　
  • 태블릿만 반영
@media screen and (min-width: 481px) and (max-width: 979px) { 여기에 CSS 입력 }　
  • 모바일만 반영
@media screen and (max-width: 480px) { 여기에 CSS 입력 }　
  • PC와 태블릿만 or 태블릿과 모바일만
/* PC 및 태블릿 */ @media screen and (mix-width: 481px){ 여기에 CSS 입력} /* 태블릿 및 모바일 */ @media screen and (max-width: 980px) { 여기에 CSS 입력 }　

「max-width: 480px", 화면 너비는최대 480픽셀 장비 = 480픽셀 이하스마트 폰 등.

반대로 "min-width: 980px"는최소 980픽셀 = 980픽셀 이상의 PC는 화면 폭이라는 ​​느낌.

  • PC와 태블릿만

화면폭은 대부분의 기기가 적용되는 이하를 기준으로 기재하고 있습니다.

스마트 폰 : 480px 이하
태블릿 ：768~980 px
컴퓨터: 980px 이상

참고: 화면 폭

스마트 폰에서도 옆으로 쓰러 뜨리면 480px 이상이됩니다.PC에서도 화면의 한쪽 반쪽에서만 표시하는 경우는 태블릿 상당의 폭이 되기도 합니다.

iPhone에서는 다음 이미지가 화면 크기의 참고가됩니다. CSS에서는 화면 폭이px(픽셀)그러나 장치 측에서는전철기로 표현하고 있으므로주의하시기 바랍니다.

이미지 : 인용원보다 일부 발췌 The Ultimate Guide To iPhone Resolutions

예를 들어 iPhone X는
point: 375 x 812
픽셀: 1125 x 2436
하지만 CSS에서 지정하는 가로 폭은 375입니다.

프로그래밍