미디어쿼리 예제 - 화면너비에 따라 구조 변경하기



css

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@charset "utf-8";
/** 전체박스 */
#wrap {
    width: 90%;
    margin: 0 auto;
    border: 4px solid #000;
}
/** 서브박스들 */
#wrap div {
    display: inline-block;
    height: 100px;
}
/* 첫번째박스 */
#wrap div:first-child {
    background: #f45750;
}
/* 두번째박스 */
#wrap div:nth-child(2) {
    background: #40b0f9;
}
/* 세번째박스 */
#wrap div:nth-child(3) {
    background: #00d2a5;
}
/* 네번째박스 */
#wrap div:nth-child(4) {
    background: #ff884d;
}
/* 다섯번재박스 */
#wrap div:last-child {
    background: #464646;
}
/* 320px 이상 */
@media all and (min-width:320px) {
    #wrap div {
        width: 100%;
    }
}
/* 600px 이상 */
@media all and (min-width:600px) {
    #wrap div {
        width: 50%;
    }
    #wrap div:last-child {
        width: 100%;
    }
}
/* 1024px 이상 */
@media all and (min-width:1024px) {
    #wrap div {
        width: 20%;
    }
    /* 마지막 div 도 20%로 따로 설정해야 한다 그렇지 않으면 min-width:600px 의 조건문에 걸려 너비가 100%가 된다 */
    #wrap div:last-child {
        width: 20%;
    }
}
 
 
cs



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!-- css 파일 임포트 -->
    <link rel="stylesheet" href="03-2.css" />
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div></div><div></div><div></div><div></div><div></div>
</div>    
</body>
</html>
cs



결과

 



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 플렉스 아이템 배치방향과 플렉스 아이템을 여러줄로 배치하기  (0) 2016.08.28
반응형웹 플렉서블 박스에 플렉스 아이템 가로방향으로 배치하기  (0) 2016.08.26
안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21

+ Recent posts

티스토리툴바