Study/JavaScript

초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기)

nana1002 2023. 2. 12. 21:43
반응형

프로젝트를 하다보면 pc뿐만 아니라 mobile 또는 table등 여러 디바이스기기가 있는데,

모든 디바이스별로 크기를 고려하여 사이즈를 조절해야 되는 문제가 있을것이다.

 

width는 단위를 %로 설정하면 되지만 hight, font-size...등 이 모든 사이즈를 일일히 조절하기엔 우리에겐 시간이 부족하다는것! 

 

그래서 rem 이라는 단위가 나왔다!

 

1.설명

rem단위는 상대적 단위로 최상위태그인 html태그에 font-size를 지정 하면 지정한 사이즈가 기준이 되어

하위자식태그의 사이즈는 모두 rem단위를 계산하여 넣어주면 추후에 자바스크립트로 font-size만 바꿔주면서 

디바이스별로 사이즈를 적용할 수 있다는것!

 

설명이 어렵다면 바로 예제 코드를 보자!

 

2.코드

<!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>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<style>
html{
    font-size: 10px;
}
.test{
    width: 100rem;
    height: 100rem;
    background-color: aqua;
}
</style>
<script>
    $( document ).ready( function(){

mobileSize();

function mobileSize(){
    var realSize = window.innerWidth;

    if(1000<realSize){
        $("html").css("font-size",10);
        console.log("width실사이즈"+realSize);
    }
    else if(800<realSize&&realSize<1000){
        $("html").css("font-size",8);
        console.log("width실사이즈"+realSize);
    }else if(500<realSize&&realSize<800){
        $("html").css("font-size",5);
        console.log("width실사이즈"+realSize);
    }else{
        $("html").css("font-size",3);
        console.log("width실사이즈"+realSize);
    }
    
}

});
</script>
<body>
    <div class="test">전체화면</div>
</body>
</html>

위에 설명에서 말했듯이 코드를 보면 태그중 제일 최상위 부모태그인 html 태그에 "font-size:10px"로 지정해 주었는데

이것의 의미는 "10px=1rem" 단위로 치환된다.

예를들어 이미지 사이즈를 width=100px, hight=100px 로 정하고싶을때 width=10rem, hight=10rem 으로 치환하여 rem단위로 넣어주면 된다!

즉,  '기준이 되는  font-size/ 실제 원하는 px' 로 나눠서 나오 값을 rem 단위로 치환하면 된다는것!

그래서 코드를 보면 width: 100rem; height: 100rem; 은 px단위로 환산하면 width: 1000px; height: 1000px; 이다!

 

그렇다면 디바이스 사이즈 별로 사이즈는 어떻게 조절할까?

그거는 자바스크립트 코드를 보면 알수 있다!

<script>
    $( document ).ready( function(){

mobileSize();

function mobileSize(){
    var realSize = window.innerWidth;

    if(1000<realSize){
        $("html").css("font-size",10);
        console.log("width실사이즈"+realSize);
    }
    else if(800<realSize&&realSize<1000){
        $("html").css("font-size",8);
        console.log("width실사이즈"+realSize);
    }else if(500<realSize&&realSize<800){
        $("html").css("font-size",5);
        console.log("width실사이즈"+realSize);
    }else{
        $("html").css("font-size",3);
        console.log("width실사이즈"+realSize);
    }
    
}

});
</script>

window.innerWidth는 실제 디바이스의 width를 알수 있는 함수로 이걸 이용하여 사이즈를 조절할수 있다.

참고로 height도 있으니 길이기준으로 하고싶다면 window.innerHeight 를 사용해 보시길...

 

여튼,,,window.innerWidth를 이용하여 실제 디바이스 사이즈를 알아내어 변수에 담아주고

if를 이용하여 사이즈별로 범위를 나누어 해당 범위라면 $("html").css("font-size",8); 를 이용하여 

디바이스사이즈에 맞게 html태그에 기준이 되는 font-size를 조절하여 rem단위로 표기한 모든 사이즈들이

기준이 되는 font-size 에 맞춰서 전체적으로 조절이 된다.

 

3.결과화면

 

 

반응형