집 >웹 프론트엔드 >CSS 튜토리얼 >미디어 쿼리 @media 사용 분석(코드 데모 포함)

미디어 쿼리 @media 사용 분석(코드 데모 포함)

藏色散人앞으로: 2022-08-07 16:48:143050검색

미디어 쿼리란 무엇입니까?

미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)에 따라 CSS 스타일을 설정할 수 있습니다. more 미디어 특성을 탐지하기 위한 조건식으로 구성됩니다. 미디어 쿼리에서 감지할 수 있는 미디어 속성은 width , height , color 등입니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다.

1. 미디어 쿼리 작업 방법

실제 작업은 장치에 요청하여 시작됩니다(표현식이라고 함). 표현식 결과가 true이면 미디어 쿼리의 CSS가 적용됩니다. 내의 미디어 쿼리 CSS는 무시됩니다.

2. 미디어 쿼리 구문

    @media screen and (max-width:600px) {
        }

3. 코드 데모 1qqq

<!DOCTYPE html>
<html>
<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>Document</title>
    <style>
        .row{
            border: 1px solid red;
        }
        .col{
            display: inline-block;
            width: 100%;
            height: 100px;
            background-color: green;
        }
        /* <768px */
        @media screen and (max-width:768px) { 
            .col{
                width: 100%;
            }
        }
        /* >=992 and  */
        @media screen and (min-width:992px){
            .col{
                width: 49%;
            }
        }
        /* >=768px and <1200px */
        @media screen and (min-width:768px) and (max-width:1200px){
            .col{
                width: 48%;
            }
        }
        /* >=1200px */
        @media screen and (min-width: 1200px) {
            .col{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

768px로 축소한 후 렌더링

미디어 쿼리 @media 사용 분석(코드 데모 포함)

미디어 쿼리란 무엇입니까?

1. 미디어 쿼리 작업 방법

2. 미디어 쿼리 구문

3. 코드 데모 1qqq

관련 기사