미디어쿼리

Viewport가 정확히 지정되어 있어야 사용가능

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

 

파일을 불러오는 방식과 css 파일내 적용하는 방식, css내 임포트

 

1. 파일 불러오기

<link type=”text/css” rel=”stylesheet” media=”screen and (max-width: 768px)” href=”mediaStyle.css” />

2. CSS내 적용

@media type and (max-width: 767px) { … }

@media (max-width:767px) { … }

@media screen and (min-width: 321px) and (max-width: 767px) { … }

@media screen and (max-width: 320px) { … }

3. CSS내 임포트

@import “mediaStyle.css”;

 

미디어타입: all(생략), screen, print, tv

width size 구분:

~320, 321~767, 768~1023, 1024~1224, 1224~   (모바일세로, 모바일가로,랩탑,데스크탑,텔레비젼)

~479, 480~767, 768~1023, 1024

max-device-width, min-device-width

orientation(:portrait, landscape, device-pixel-ratio

 

and: 모든쿼리 적용

not: 모든쿼리 false

, :1개라도 만족하면 적용

 

모바일 또는 데스크탑 기준에 따라 적용순서가 다름

모바일: 480 -> 768 -> 1200

데스크탑: 반대 순서로 설정