css

미디어쿼리(media queries) 디바이스 사이즈에 따라서, 화면이 변경

wanee 2015. 1. 29. 15:11
반응형

미디어쿼리(media queries) 디바이스 사이즈에 따라 변경되는 화면 소스

 

<!DOCTYPE html>

<html>

<head>

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

<style>

      @media all and (max-width: 767px) {

          html {

           background: black;

           color: yellow;

          }

      }

 

      @media all and (min-width: 768px) and (max-width: 959px) {

         html {

           background: green;

           color: white;

        }

      }

 

      @media all and (min-width: 950px) {

         html {

           background: blue;

           color: white;

       }

      }

</style>

</head>

 

<body>

 

 <h1>타이틀</h1>

        <p>28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. </p>

        <p>28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. </p>

        <p>28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. </p>

        <p>28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. </p>

        <p>28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. </p>

 

</body>

</html>

 

반응형