CSS viewport 기기별 가로 사이즈 정리

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 2,153회 작성일 22-06-26 22:23(글 수정: 2023년 07월 22일)

본문

viewport 기기별 가로 사이즈 정리 합니다.


[code]

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="UTF-8">

        <!-- 뷰포트메타태그 -->

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>미디어쿼리</title>

        <style>

            /* 모든기기공통 CSS */

            body{ background-color: orange; }


            /* desktop 규격 */

            @media screen and (min-width: 1024px){

                body{ background-color: lightblue; }

            }


            /* tablet 규격 */

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

                body{ background-color: pink; }

            }


            /* mobile 규격 */

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

                body{ background-color: navy; }

            }

        </style>

    </head>

    <body>

        

    </body>

</html>

[/code]




viewport 관련된 게시글 보기

댓글목록

등록된 댓글이 없습니다.