미디어 쿼리(@media)를 이해하기 위한 간단한 HTML 템플릿입니다.
이해를 목적으로 하기에 자세하지 않습니다. 세부적인건 아래 URL을 참고하세요.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://gist.github.com/marcobarbosa/798569

1. 미디어 쿼리는 all을 처음에 적용해야 합니다. 반대로 적용하면 all만 적용됩니다.
2. IE 6~8 버전을 지원하기 위해 html5shiv.min.js를 이용합니다.

DEMO :: 데스크탑 브라우저의 크기를 변경해 보세요.
http://wonhada.com/wp-assets/mediaquery.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Media Query Template</title>
       
        <style>
            .container {
                position: relative;
                width: 70%;
                margin: 0 auto;
            }
           
            .center {
                position: relative;
                width: 100%;
                height: 100px;
                background-color: #FF0000;
            }

            @media all {/* screen >= 1001 */
            }
           
            @media (max-width: 1000px) {/* screen <= 1000 */
                .center {
                    background-color: #00FF00;
                }
            }
           
            @media (max-width: 500px) {/* screen <= 500 */
                .center {
                    background-color: #0000FF;
                }
            }
        </style>
       
        <!-- Old IE support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <div class="center"></div>
        </div>
    </body>
</html>