반응형 웹 기본 소스

반응형 웹 기본 소스입니다

폰, 테블릿, PC 모두 잘 됩니다.

미디어쿼리가 없는 IE 9 이하에서도 잘 작동 합니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>타이틀</title>

<style type="text/css">
       
        @media(min-width:320px) and (max-width:767px)  /* 폰 */
        {
            body{background:#F96;}
        }
        @media(min-width:768px) and (max-width:1024px)  /* 테블릿 */
        {
            body{background:#C39;}
        }
        @media(min-width:1025px)   /* PC */
        {
            body{background:#663;}
        }

</style>

 

 

실행 시킨 후 창을 늘였다 줄였다 하면 백그라운드 색이 바뀌는걸 볼 수 있습니다.