( css ) media query 사용하기, 개념정리

적용 방법

1. HTML의 HEAD의 LINK 태그에 media속성에 지정

<link href="css/hb.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">

2. CSS 파일내에서 @media

@media all and (min-width:480px) {  }

미디어 타입	설명
all	모든 미디어 장치에 사용 (기본값)
print	프린터에 사용
screen	pc, 태블릿, 스마트폰에 사용
speech	스크린리더기가 페이지를 읽는데 사용

 

3. CSS 파일내에서 import

/* common.css */

@import "../media.css"; /

/* media file */

@media screen and (min-width:768px) { ... }

 

 

**2번 방법의 예제**

• max-width :지정한 사이즈보다 작을 경우

@media(max-width: 800px){ //800px 미만이 되었을 때 }

• min-width : 지정한 사이즈보다 넓은 경우

@media(min-width: 1200px){ //1200px이상이 되었을 때 }

• max-device-width : 디바이스의 최대 사이즈보다 작은 경우 적용
• min-device-width : 디바이스 최소 사이즈보다 넓을 경우 적용
• orientation : 세로 길이 혹은 가로길이의 둘 중 하나로 기준을 적용
• and: 둘다 해당
• , : 둘 중 하나만 해당 해도 됨( or )

orientation

- landscape: 가로모드

// 너비가 480 픽셀 이상일 때, 혹은 화면이 가로모드 일 때 적용
@media only screen and (min-width: 480px), (orientation: landscape) { .. }

- portrait: 세로모드

 

 

**큰 화면에 우선 적용 : @media에 ~px 미만일때 바뀔 css 입력

*작은화면에 우선 적용시 반대

//큰 화면 우선 적용
@media (max-width: 1024px) {..}
@media (max-width: 768px) {..}
@media (max-width: 480px) {..}

 

head안에 삽입해주면 모바일에서 이미지를 손으로 크기 확대 축소 가능

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />

 

 

디바이스별 사이즈

디바이스	가로	세로
데스크탑(보편적)	1920	1080
데스크탑	1366	768
데스크탑(작은 사이즈)	1024	768
데스크탑 1025~
테블릿(보편적)	768	1024
테블릿(가로가 가장 큰)	1280	800
테블릿(가로가 가장 작은)	600	1024
테블릿 768 ~ 1024
모바일 320~

 

모바일 기기별 사이즈

모바일 기기	가로	세로
iPhone X	375	812
iPhone 6,7,8	375	677
iPhone 6,7,8 plus	414	736
iPhone 5	320	568
Galaxy S5, S8	360	640
Galaxy Note 8	360	640
iPad Pro	1024	1366

 

 

 

디바이스별 사이즈 참고

https://brunch.co.kr/@jooiway/28

디바이스별 최적화를 위해