px,em,rem 차이와 vw,vh 이해하기

px,em,rem의 차이

px : px은 디지털 화면에 표시되는 가장 작은단위로 고정된크기를 가진다.
em : em은 상대적 단위로 부모요소의 글꼴 크기에 상대적으로 작용한다.

.container{
	font-size:15px;
}
.container .title
{	
	font-size:2em; // 30px;
}

rem : rem은 상대적 단위이며 root,즉 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다. HTML에서 최상위 요소는 html태그이다. 따라서 rem의경우, html 요소의 font-size 속성값이 기준이 된다. 만약 별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받는다.

반응형 웹을 만들기 위해서는 다양한 환경과 사용자의 요구사항에 유연하게 대응할 수 있는 rem사용 해보자.

vh,vw

vw :1vw는 뷰포트 너비의 1%이다. 뷰포트 너비가 1000px일경우 50vw는 500px이다.
vh : 1vh는 뷰포트 높이의 1%다.

반응형 브레이크 포인트 잡는 기준

모바일: 320px ~ 480px
태블릿: 481px ~ 768px
작은 데스크탑: 769px ~ 1024px
대형 데스크탑: 1025px 이상

제일 작은 기준으로 모바일을 우전으로 잡고 점진적으로 맞춰가며 스타일링 하는것이 좋을 것 같다.