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

[반응형웹] - 미디어쿼리 (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개

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923