테스트 사이트 - 개발 중인 베타 버전입니다

[반응형웹] - 미디어쿼리 (media Query) 간단한 예제

[반응형웹] - 미디어쿼리 (media Query) 간단한 예제  

 

1. 미디어 쿼리 웹 사이트 예제

    http://mediaqueri.es/

2. 미디어 쿼리 웹 사이트 하나

    http://stuffandnonsense.co.uk/

 

 

예제 1

  1. <!DOCTYPE HTML>
  2. <html lang="ko">
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale1.0,user-scalable=no">
  5.  
  6. <title>반응형 웹 </title>
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9.  
  10.     <div id="layer1" class="cLayer" style="background-color:#ff6666">메뉴1</div>
  11.     <div id="layer2" class="cLayer" style="background-color:#ffcc33">메뉴2</div>
  12.     <div id="layer3" class="cLayer" style="background-color:#ffff00">메뉴3</div>
  13.     <div id="layer4" class="cLayer" style="background-color:#33ff66">메뉴4</div>
  14.  
  15.    
  16. </body>




예제 2
  1. @charset "utf-8"
  2.  
  3. /* 모든 Device를 위한 공통 로드 */
  4.  
  5. .cLayer{
  6.     floot: left;
  7.     padding : 1.0em;
  8. }
  9. /* 모바일 Device : 0 ~ 640 */
  10. @media screen and (max-width: 640px){
  11.  
  12.     html{
  13.         backgroundred;
  14.  
  15.     }
  16.     .cLayer{
  17.         padding1.0em;
  18.     }
  19.  
  20. }
  21.  
  22. /* Tablet Device : 641 ~ 768 */
  23. @media screen and (min-width:641px){
  24.  
  25.     html{
  26.         backgroundgreen;
  27.  
  28.     }
  29.     .cLayer{
  30.         padding3.0em;
  31.     }
  32.  
  33. }
  34.  
  35. /* Desktop Device : 1024 이상 */
  36. @media screen and (min-width:1024px){
  37.  
  38.     html{
  39.         backgroundblue;
  40.  
  41.     }
  42.     .cLayer{
  43.         padding6.0em;
  44.     }
  45.  
  46.  


아래 출처 사이트를 방문하시면 미디어쿼리에 대한 예제를 확인 하실 수 있습니다.

출처 : http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140184403044

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

게시글 목록

번호 제목
1720
1718
1716
1711
1710
1707
1704
1700
1693
1689
1687
1686
1683
1680
1676
1675
1674
1671
1667
1655
1649
1646
1641
1638
1636
1633
1631
1627
1624
1623