CSS-반응형 디자인 메타태그

뷰포트 메타 태그

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

 

미디어쿼리(외부파일)

<link rel=”stylesheet” media=”screen and (max-width: 700px)” href=”css/smartphone.css” />

<link rel=”stylesheet” media=”screen and (min-width: 701px) and (max-width: 900px)” href=”css/tablet.css” />

<link rel=”stylesheet” media=”screen and (min-width: 901px)” href=”css/desktop.css” />

 

하나의 스타일시트에 정의

 

@media (min-width:1200px){ … }

@media (min-width:768px) and (max-width: 979px){ … }

 

 

풀HD급 스마트폰도 나오는데 화면크기를 작다.

무조건 width크기로 따지는것은 잘못된 표현이 될꺼같다.