반응형
[반응형웹] - 미디어쿼리 (media Query) 간단한 예제
1. 미디어 쿼리 웹 사이트 예제
http://mediaqueri.es/
2. 미디어 쿼리 웹 사이트 하나
http://stuffandnonsense.co.uk/
예제 1
- <!DOCTYPE HTML>
- <html lang="ko">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale1.0,user-scalable=no">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- </body>
- </html>
[출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹
예제 2
- @charset "utf-8"
- /* 모든 Device를 위한 공통 로드 */
- .cLayer{
- floot: left;
- padding : 1.0em;
- }
- /* 모바일 Device : 0 ~ 640 */
- @media screen and (max-width: 640px){
- html{
- background: red;
- }
- .cLayer{
- padding: 1.0em;
- }
- }
- /* Tablet Device : 641 ~ 768 */
- @media screen and (min-width:641px){
- html{
- background: green;
- }
- .cLayer{
- padding: 3.0em;
- }
- }
- /* Desktop Device : 1024 이상 */
- @media screen and (min-width:1024px){
- html{
- background: blue;
- }
- .cLayer{
- padding: 6.0em;
- }
- }
[출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹
아래 출처 사이트를 방문하시면 미디어쿼리에 대한 예제를 확인 하실 수 있습니다.
출처 : http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140184403044
[출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹
반응형
'IT > 미디어쿼리' 카테고리의 다른 글
| css em rem vw vh vmin vma (0) | 2016.11.03 |
|---|---|
| 미디어쿼리 예제 화면너비에 따라서 다른 CSS 적용 (0) | 2016.11.03 |
| 미디어쿼리 강좌 이해 기초 media all and or not (0) | 2016.10.24 |