-
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기)Study/JavaScript 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.결과화면
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 자바스크립트로 프린트 기능 구현하기 (1) 2023.03.03 초보자를 위한 화살표로 메뉴펼치기 구현(화살표 모양 토글 구현) (0) 2023.03.02 초보자를 위한 캔버스(Canvas)로 그림 그리기 방법 (0) 2023.02.07 초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기) (1) 2023.01.18 초보자를 위한 반응형 기초(화면크기별로 width설정 하기) (0) 2023.01.07