[CSS] 반응형 디바이스 크기별로 width 설정

728x90

디바이스별로 화면 크기가 달라 px 단위로 된 것을 % 로 설정해야 디바이스 크기에 따라

줄어들고 늘어날 수 있다.

% 기준점은 %를 설정하려는 선택자의 상위 부모 선택자를 px 값으로 고정값 주고 그것을 기준으로

%로 변경하는 것이다.

html

<!DOCTYPE html>
<html lang="en">
<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>디바이스별 크기</title>


</head>
<body>
    <header>
        <div class="top">
            <h3>디바이스별 크기</h3>
            <button>setting</button>
        </div>
        <div class="nav">
            <div>또리</div>
            <div>봄이</div>
            <div>주인</div>
            <div>강아지</div>
        </div>
    </header>
    <section>
        <div>화면1</div>
        <div>화면2</div>
        <div>화면3</div>
        <div>화면4</div>
    </section>
</body>
</html>

CSS

body{
    width: 412px;
    background-color: tomato;
    margin: 0;
    padding: 0;
    border: 0;
}
header{
    width: 100%;
    background-color: skyblue;
}
.top>h3{
    display: inline-block;
}
.top>button{
    display: inline-block;
}
.nav>div{
    display: inline-block;
}

header 태그 width를 조절하는 코드이다.

그러려면 해당 선택자의 상위부모선택자인 body 태그의 width를 px로 설정하고나서 header 태그에서 %값으로 맞추면 된다.

그리고 디바이스별로 크기가 제각각인데 일일이 변경하는 것이 아닌 자바스크립트로 설정 가능하다.

Javascript

$( document ).ready( function(){

    mobileSize();

    function mobileSize(){
        var realSize = window.innerWidth;
        $("body").css("width",realSize);
        console.log("디바이스 실사이즈:"+realSize);
        console.log("모바일 실사이즈:"+$("body").css("width"));
    }

});

window.innerWidth는 현재 디바이스의 크기를 알려주는 함수이고 realSize 변수에 담는다.

body태그의 css의 width를 realSize변수에 담긴 값으로 바꿔준다.

728x90

'HTML&CSS' 카테고리의 다른 글

[CSS] 배경 고정한 채로 스크롤 움직이기 (0)	2023.12.05
[HTML] meta 태그 viewport 설정, 문법 (0)	2023.09.26
[HTML5] 웹접근성 tabindex 초점 이동 (0)	2023.09.24
[CSS] img 가운데 정렬하기 (0)	2023.09.15
[HTML] a 태그로 이메일,전화번호 링크 걸기 (0)	2023.09.13