반응형 UI 만들기

개요

회사 렌딩페이지를 만들면서 모바일, 태블릿 등 다양한 기기 환경에서도 볼 수 있는 UI를 제공하기 위해서 반응형을 고려하였다.

해당 글은 프로젝트를 진행하면서 학습했던 것을 정리 하는 용도로 작성되었으며 참고용으로 봐주었으면 한다

목차

• 뷰포트 설정하기
• break point (중단점) 설정하기
• 비율 설정을 통해 화면 크기에 맞추기

뷰포트 설정하기

디바이스 화면크기에 맞추며 초기배율은 1배수(100%)를 따른다. 또한 핀치줌을 지원하여 확대 축소가 가능하게 지원한다.

핀치줌이란?

모션을 통해 확대 축소를 하는 행위를 말한다. 모니터로는 컨트롤+ 스크롤 모바일로는 검지와 엄지를 대각선으로 벌리고 줄임으로써 확대축소를 할 수 있다.

예시

<meta name="viewport" content="width=device-width" initail-scale="1.0" />

break point(중단점) 설정하기

중단점을 설정함으로써 다양한 기기환경에 대응하는 UI를 설정한다. 해당 프로젝트의 경우 태블릿 768, 모바일 425를 기준으로 설정 하였다.

break point 정리(참고)

• Mobile S – 320px
• Mobile M – 375px
• Mobile L – 425px
• Tablet – 768px
• Laptop – 1024px
• Laptop L – 1440px
• 4K – 2560px

미디어 쿼리

폰트나 버튼크기의 경우 미디어 쿼리를 통해 각 기기환경에 맞게 크기를 설정하였다.

&__description {
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: #464646;

    @media (max-width: 768px) {
      font-size: 1.2rem;
    }

    @media (max-width: 425px) {
      font-size: 1.025rem;
    }
  }

비율 설정을 통해 화면크기에 맞추기

이미지나 동영상같은 경우 화면크기에 맞추면서 비율을 유지하고 싶었다. 

예시

padding-top을 이용해서 비율을 유지하는 방법도 있으나 최근에는 모든 브라우저에서 aspect-ratio를 쓰는 방법을 지원하기 때문에 aspect-ratio를 사용하여 비율을 유지 할 수 있다.

https://caniuse.com/?search=aspect-ratio 

 iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.5; // 가로 / 세로 비율
 }

 

 

출처

http://uidesignguides.com/screen-size-break-point/