반응형웹

반응형웹

반응형웹의 원리는 브라우저 크기에 따라 css를 교체해준다.

1. head 안에

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

<link rel=”stylesheet” href=”스타일시트이름.css”> 을 넣는다.

2. css 파일에 아래 내용을 넣는다.

@media screen and (max-width:450px){
/*    모바일 */
   #d_title{font-size: 12px;  width:100%; height:125px;}
   #d_menu{width:100%; height:40px; font-size:12px; font-weight:bold;}
   #d_mid{font-size: 12px;}
   #d_box{display: none;}
}

@media screen and (min-width:451px) and (max-width:900px){
/*    타블렛 */
   #d_title{font-size: 12px; width:100%; height:125px;}
   #d_menu{width:100%; height:40px;
         font-size:14px; font-weight:bold;}
   #d_mid{font-size: 12px;}
   #d_box{display: none;}
}

@media screen and (min-width:901px){
/*  데스크탑*/

   #d_title{margin-left:100px; width:200px; font-size: 12px; height:125px; display: inline-block;}
   #d_menu{width: 580px   ; height:130px; display: inline-block;
          font-size:16px; font-weight:bold;}
   #d_mid{font-size: 12px;}
   #d_box{display:block; margin-left:100px; width:188px; height:650px; overflow:hidden;}
}