반응형 웹#7 미디어 쿼리와 뷰포트(1)

카테고리 없음

반응형 웹#7 미디어 쿼리와 뷰포트(1)

Dahee Joy Cha 2019. 11. 2. 22:09

[only 또는 not] @media [미디어 유형] [and 또는 ,콤마](조건문){실행문}

only: 해당 미디어만

not: 해당 미디어 제외하고 전부

e.g. not @media .tv

=> tv 제외하고 전부.

[미디어유형]: 생략시 all keyword와 동일하게 행동

all, print, screen, tv, projection, handhold, speech, aural, embossed, tty, Braille

스마트기기:

[and, 콤마]: comma는 or과 동일하게 작동.

미디어 유형의 종류

미디어 쿼리 적용법

미디어 쿼리 주의사항

1. @media all and 공백 (min-width:320px){실행문}

2. 조건문 접두사인 min/max를 사용할때, min 접두사는 크기가 작은 순서대로, max는 크기가 큰 순서대로 작성해야함.

3. 미디어 쿼리를 사용해서 브라우저 크기를 감지할 때는, HTML 문서 크기를 기준으로 감지.

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @media all and (min-width:320px){
            body{
                background-color: yellow;
            }
        }
        @media all and (min-width:768px){
            body{
                background-color: red;
            }
        }
        @media all and (min-width:1024px){
            body{
                background-color: green;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>