반응형 디자인에서 크기 설정
반응형 디자인이란?
우선, 재차 응답형 디자인이란 「어떤 단말의 브라우저로 표시해도 보기 쉬운 Web 페이지의 디자인」입니다.
PC나 스마트폰, 태블릿과 다른 디스플레이 크기의 단말기에서 같은 웹페이지를 표시했을 때, 모든 단말기에서 PC용 디자인으로 표시하면 스마트폰이라면 화면이 너무 작아서 보기 힘들거나 합니다.
반대로, 스마트폰만을 상정해 구현한 페이지는, 대형 PC의 디스플레이로 보면(자) 사이 연장해 보일지도 모릅니다.
이러한 문제를 해결하고 표시하는 디스플레이의 크기에 따라 보기 쉬운 디자인을 표시하는 것이 "반응형 디자인"입니다.
각 요소의 "사이즈"를 어떻게 대응하는 것이 가장 좋은가?
디자인에 관한 것이므로, Web 페이지에 의해서 어떻게 보이는 것이 베스트인가는 다른가 생각합니다만, 베이스가 되는 생각은 정리해 두려고 생각합니다.
여기서는 각 요소의 "크기"에 대해 정리합니다.
사이즈에 대한 대응 방법을 크게 다음 3가지로 나누었습니다.
디자인에 관한 것이므로, Web 페이지에 의해서 어떻게 보이는 것이 베스트인가는 다른가 생각합니다만, 베이스가 되는 생각은 정리해 두려고 생각합니다.
여기서는 각 요소의 "크기"에 대해 정리합니다.
사이즈에 대한 대응 방법을 크게 다음 3가지로 나누었습니다.
각 요소에 대해 다음과 같이 대응하는 것이 최선이 아닐까 정리해 보았습니다.
각 패턴의 구현 방법
패턴 1(일정)
px, rem, em, % 등의 단위를 사용하여 크기를 지정합니다.
단위의 상세는 여기 에 기재되어 있습니다.
어떤 단위를 선택하느냐에 따라 사이즈 설정 방법은 달라지지만, 디스플레이를 확대/축소해도 초기 표시의 사이즈에서는 바뀌지 않습니다.
패턴 2(포인트로 전환)
CSS의 "미디어 쿼리"라는 설정을 추가하여 지정된 크기 이하의 디스플레이 디스플레이의 경우 CSS를 전환할 수 있습니다.
구체적인 설정 방법은 이 사이트 이 자세하고 알기 쉽습니다.
전환 포인트(max-width)를 어느 정도의 사이즈로 하는지입니다만, 대략 600px 전후로 전환하도록 설정하고 있는 것이 많은 것 같습니다.
패턴 3(부드럽게 변동)
vw · vh와 같은 단위를 사용하여 크기를 지정합니다. 디스플레이의 크기에 대한 비율로 각 요소의 크기가 결정되므로, 디스플레이를 확대·축소하면 각 요소도 확대·축소합니다.
단위의 상세는 이 기사 를 알기 쉽습니다.
사이즈 이외의 대응에 대해서
각 요소의 크기 외에도 디자인에 고려해야 할 사항이 있습니다.
예를 들면, 디스플레이의 사이즈에 의해 박스 요소를 옆에 늘어놓을까, 세로에 늘어놓을까···1열 표시인가, 3열 표시인가···등 레이아웃 자체를 전환하고 싶은 경우도 있을까 생각합니다. 이 경우 パターン2
의 미디어 쿼리를 사용하여 CSS를 전환해야 합니다.
그 근처는 또 정리가 필요하면 쓰려고 합니다.
참고
각 요소의 크기 외에도 디자인에 고려해야 할 사항이 있습니다.
예를 들면, 디스플레이의 사이즈에 의해 박스 요소를 옆에 늘어놓을까, 세로에 늘어놓을까···1열 표시인가, 3열 표시인가···등 레이아웃 자체를 전환하고 싶은 경우도 있을까 생각합니다. 이 경우
パターン2
의 미디어 쿼리를 사용하여 CSS를 전환해야 합니다.그 근처는 또 정리가 필요하면 쓰려고 합니다.
참고
Reference
이 문제에 관하여(반응형 디자인에서 크기 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/maruuuuu/items/4ce0ded12024cc68d6f2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)