미디어쿼리(media) 와 뷰포트(viewport)


미디어쿼리(media) : 디바이스의 환경 또는 종류를 감지하여 웹사이트를 변경

뷰포트(viewport) : 디바이스의 보이는 영역을 디바이스의 실제화면크기로 변경


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
<!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">
          
    <style>
    /* 미디어쿼리 : 디바이스의 환경 또는 종류를 감지하여 웹사이트를 변경 */
    @media all and (min-width:320px){
        body{
            background: #e65d5d;
        }
    }
    @media all and (min-width:600px){
        body{
            background: #2dcc70;
        }
    }
    @media all and (min-width:960px){
        body{
            background: #6fc0d1;
        }
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
    <img src="img_01.jpg" />
</body>
</html>
cs



결과

화면크기에 따라 다르게 보인다

 


저작자표시 (새창열림)

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

반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
안드로이드 안드로이드 버전, SDK(API)버전, 빌드버전 가져오기  (0) 2016.08.21
안드로이드 키보드가 올라올때 밑의 버튼이 올라오는 것 막기  (0) 2016.08.21
안드로이드 화면진입시 키보드 자동으로 올라오는거 막기  (0) 2016.08.18

+ Recent posts

티스토리툴바