반응형홈페이지 미디어쿼리 css 연결하기

반응형홈페이지 제작시 미디어쿼리용 css 파일 연결할때.. 

html 코딩 입니다.

큰 화면부터 css 을 작성할 경우입니다. 

 

 

데스크탑용css 

태블릿용css  

모바일용css

 

 

 

★★★ 미디어쿼리 스타일시트 연결하기 

<!-- 기초 세팅값 -->
<link rel="stylesheet" href="default.css">

<!-- 데스크탑 css -->
<link rel="stylesheet" href="index.css">

<!-- 타블릿 css -->
<link rel="stylesheet" href="index_tablet.css" media="all and (max-width:1120px)">

<!-- 모바일  css -->
<link rel="stylesheet" href="index_mobile.css" media="all and (max-width:960px)">

 

데스크탑 부터 모바일웹 화면 까지 ( 큰화면에서 작은 화면으로 설계할때 .. )

큰 수치부터 css 링크 걸어준다. 

max-width 로 나타내 준다.

 

 

(max-width:1120px)  1120px 이하의 화면일때 태블릿 css : index_tablet.css

(max-width: 960px)  : 960px 이하의 화면일때 모바일 css  : index_mobile.css 

 

 

디자인설계에 따라 해당 수치 조정은 가능하다.