미디어 쿼리를 사용하여 데스크톱, 태블릿 및 모바일을 타겟팅하는 방법은 무엇입니까?

미디어 쿼리는 화면 크기와 해상도가 다른 다양한 장치에 스타일 시트를 전달하는 데 널리 사용되는 방법입니다. 그들은 수많은 장치에서 웹 사이트의 모양을 변경하는 데 사용됩니다. 미디어 쿼리는 미디어 유형과 true 또는 false일 수 있는 하나 이상의 표현식으로 구성됩니다. 제공된 미디어가 콘텐츠를 보는 장치 유형과 일치하는 경우 쿼리는 true를 반환합니다. 미디어 쿼리가 true를 반환하면 스타일 시트가 사용됩니다.

다양한 장치의 화면 해상도는 다음과 같습니다.

모바일(스마트폰) 최대 너비: 480px

저해상도 태블릿 및 ipad 최대 너비: 767px

태블릿 Ipads 세로 모드 최대 너비:1024px

데스크탑 최대 너비: 1280px

거대한 크기(큰 화면) 최대 너비: 1281px 이상

통사론:

@media( media feature ) {
    // CSS Property
}

CSS 파일style.css이 있다고 가정합니다.

        /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            body {
                background-color: red;
            }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            body {
                background-color: yellow;
            }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            body {
                background-color: blue;
            }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px){
            body {
                background-color: green;
            }
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            body {
                background-color: white;
            }
        }