웹퍼블리셔) 반응형 웹에서 비율 유지하기

웹퍼블리셔를 하다보니 디자이너가 준 시안을 어떤 기기에서도 똑같은 비율로 나오도록 해야할 때가 있다. 

%를 쓰면 되지만 계산하기 불편하다. 그럴 때 아래처럼 쓰면 계산을 하지 않아도 편하게 할 수 있다.

 

예시)

 

div {width : calc(100vw*(300/1920));}

 

 

calc(100vw*( 엘리먼트의 길이 / 피그마에서 제시해준 화면의 길이));

 

피그마 상에서 화면의 넓이가 1920이고 표현하려는 요소의 길이가 300일 때 위에처럼 해주면 어떤 화면에서든지 똑같이 나오게 할 수 있다.