이 제목을 보시면 또 다른 오타가 있는 반응형 높이 디자인이 있지 않을까 생각되시죠? 진심인가요? "반응형 웹 디자인"은 일반적으로 다양한 너비와 장치 크기에서 브라우저를 확인하기 때문입니다. 우리는 일반적으로 너비를 줄여 가로 응답성을 조정하지만, 브라우저 높이를 줄여 세로 응답성을 고려하는 경우는 거의 없습니다. 이때 Zhimimi는 몇 가지 질문으로 인해 마음이 약간 동요할 수 있습니다. 브라우저 높이를 낮춰야 합니까? 응, 계속 얘기해보자.
웹사이트를 디자인할 때 실제 데이터에 의존하지 않고 가정을 하는 것은 좋지 않습니다. 수평적, 수직적 테스트의 책임도 매우 중요합니다.
디자이너에게 있어서 무리한 가정은 웹사이트 디자인을 망치는 중요한 요소 중 하나입니다. 예를 들어, 사용자가 화면의 전체 너비와 높이를 사용하여 웹 사이트를 탐색해야 한다고 가정하는 것은 올바르지 않습니다. 대신 최악의 시나리오를 고려해야 합니다.
지미, 알겠어? 현실은 모든 사용자가 우리가 기대하는 방식으로 브라우저를 사용하는 것은 아니라는 것입니다. 브라우저 높이를 낮추면 웹사이트가 형편없어 보입니다.
브라우저 크기를 수직으로 조정하는 것이 뷰포트 높이를 변경하는 유일한 방법은 아닙니다. 브라우저 DevTools를 열면 브라우저의 높이도 차지하게 됩니다.
위 이미지의 화살표 영역은 현재 뷰포트의 높이를 나타냅니다. 더 작은 노트북 화면의 경우 웹 페이지의 작은 부분만 표시됩니다.
실제 질문은 뷰포트 높이가 더 작을 때 사용자 경험을 향상시킬 수 있는가입니다. 네, 가능합니다. 한번 살펴보겠습니다.
디자이너와 개발자로서 우리 중 일부는 디자인의 너비 변경에만 집중하고 뷰포트 높이 변경은 무시합니다. 예를 들어 개발 중에 UI는 다양한 뷰포트 너비에 걸쳐 특정 구성 요소의 변형을 제공합니다. 하지만 뷰포트 높이가 다르면 어떨까요?
위 이미지에는 뷰포트 높이에 따라 조정되는 탐색 메뉴가 있습니다. . 뷰포트 크기가 작은 경우(예: iPhone 5) 탐색 항목은 2열 그리드로 표시됩니다. 이러한 사고 방식은 누군가가 실행해야 한다고 말할 때까지 포기되거나 최적화되는 경우가 많습니다.
CSS에서 위의 요구 사항을 달성하는 방법에는 두 가지가 있습니다.
수직 미디어 쿼리뷰포트 단위Zhimimi는 CSS에서 너비 미디어 쿼리를 사용하는 방법을 확실히 알고 있습니다.
@media (최소 너비: 700px) { .element { /* 뭔가를 하세요.. */ }}덜 일반적으로 사용되는 것은 뷰포트 높이를 확인하는 수직 미디어 쿼리입니다.
@media (최소 높이: 500px) { .element { /* 뭔가를 합니다.. */ }}/* 또는 */@media (방향: 가로) { .element { /* 뭔가를 합니다.. */ }}뷰포트 단위를 사용하면 사용자에게 더 나은 경험을 제공하는 데 도움이 될 수 있습니다. 예를 들어 뷰포트 높이를 기준으로 요소 사이의 수직 간격을 제어합니다.
.hero__title { margin-bottom: calc(10px + 5vh);}
위에 표시된 것처럼 더 큰 화면(예: iMac 27인치)의 경우 아래쪽 여백이 매우 커집니다. 과도한 마진 문제를 해결하는 방법에는 두 가지가 있습니다.
미디어 쿼리CSS 비교 기능첫 번째 방법(미디어 쿼리)이 더 많이 지원됩니다. 화면이 큰 경우 하단 여백의 최대값을 설정해야 합니다.
@media (최소 너비: 2200px) { .hero__title { margin-bottom: 40px }}또 다른 방법은 CSS 클램프() 비교 함수를 사용하는 것입니다. 클램프() 함수의 기능은 값의 범위를 반환하는 것입니다.
.hero__title { margin-bottom: 클램프(10px, 5vh, 40px);}이 예에는 제목과 그림에 대한 섹션이 있는 섹션 영역이 있으며 섹션 높이는 뷰포트 높이의 100%와 같습니다.
뷰포트 높이가 작아질 때까지는 모든 것이 괜찮아 보입니다. 섹션의 높이는 그림과 텍스트 내용을 수용하기에 충분하지 않습니다. 따라서 페이지의 다른 부분과 겹칩니다.
그림이 아래 섹션과 어떻게 겹치는지 확인하세요. 이는 수직 공간이 충분하기 때문에 발생합니다. HTML과 CSS를 살펴보세요.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- content --></p> <img class="hero__thumb" src="Figure.png" alt="" /> </p></p>CSS
.hero { 높이: 100vh;}.hero__thumb { 플렉스: 0 0 550px 너비: 550px;}이러한 문제를 해결하기 위한 몇 가지 솔루션은 다음과 같습니다.
그림의 너비 대신 고정 크기(너비 및 높이)를 설정하면 높이가 부족하면 이 문제가 계속 발생합니다. 높이: 뷰포트 높이가 700px보다 큰 경우에만 100vh입니다(미디어 쿼리 값은 상황에 따라 달라질 수 있음).우리는 이 두 가지를 결합하여 보다 강력한 솔루션을 얻을 수 있습니다.
.hero__thumb { width: 400px; height: 300px; object-fit: contain; /* 이미지 압축을 방지하려면 */}@media (min-height: 700px) { .hero { height: 100vh;좋아요, 이제 우리는 수직적 미디어 쿼리를 사용하는 것이 더 낫다는 데 동의합니다. 그러나 100vh를 사용하는 것은 일러스트레이션의 크기를 제한하더라도 텍스트 내용에서는 동일한 작업을 수행하지 못할 수 있으므로 위험합니다. 텍스트 내용이 길어지면 동일한 문제가 다시 발생합니다. 아래 그림을 참조하세요.
이 문제를 해결하기 위해 높이 대신 최소 높이를 사용할 수 있습니다. 이렇게 하면 내용이 길어지면 높이가 겹치지 않고 늘어나게 됩니다.
@media (최소 높이: 700px) { .hero { 최소 높이: 100vh }}스크롤하는 동안 제목을 고정하는 것이 나쁜 것은 아니지만, 경험이 좋을 수 있도록 수직 공간이 충분히 좋을 때만 제목을 고정하고 싶습니다.
이것은 풍경에 관한 웹사이트입니다. 여기서 높이가 너무 작으면 고정된 높이가 전체적으로 많은 공간을 차지한다는 것을 알 수 있습니다. 이것이 사용자에게 정말로 중요한가요? 일반 사용자는 이와 같은 웹사이트를 보기 위해 축소하지 않기 때문에 대부분의 경우 중요하지 않습니다. 현재는 최적화를 원한다면 높이가 특정 높이보다 작다고 판단되면 수직 미디어 쿼리를 사용하여 고정 위치 지정을 정적 위치 지정으로 변경하는 아이디어입니다.
@media (min-height: 700px) { .site-header { /* 위치: 고정 또는 위치: 고정 */ }}나는 Twitter.com의 네비게이션 바에서 이 패턴을 발견했습니다. 아이디어는 수직적 미디어 쿼리를 Priority+ 패턴과 결합하는 것입니다.
뷰포트 높이의 크기가 조정되면 덜 중요한 요소(책갈피 및 목록)가 제거되고 추가 메뉴에 추가됩니다. 이는 수직 미디어 쿼리의 좋은 사용 사례입니다.
.nav__item--secondary { 디스플레이: 없음;}@media (최소 높이: 700px) { .nav__item--secondary { 디스플레이: 블록 }}웹사이트에 사이드바 또는 사이드바가 있는 경우 뷰포트 높이가 작을 때 일부 탐색 항목 사이의 수직 간격을 줄여 전체적인 디자인을 향상시킬 수도 있습니다.
우리는 모달 상자가 적어도 수평으로 중앙에 있어야 한다는 것을 알고 있습니다. 그러나 때로는 수직으로 중앙에 배치해야 하는 경우도 있습니다. 일반적으로 다음 솔루션을 사용합니다.
.modal__body { 위치: 절대; 왼쪽: 50%; 변환: 번역(-50%, -50%);
하지만 내용이 길어지면 모달이 화면을 수직으로 채워 사용자가 스크롤할 수 없게 되는 문제가 있습니다.
이러한 상황에는 여러 가지 이유가 있습니다.
모달 상자에 높이가 없고 모달이 수직 중앙에 위치합니다(이로 인해 문제가 더 빨리 발생하게 됩니다).수리된 CSS는 다음과 같습니다.
.modal__body { 위치: 절대; 왼쪽: 3rem; 변환: X(-50%); 최소 높이: 500px; (최소 높이: 700px) { .modal__body { 상단: 50%; 변환: 번역(-50%, -50%) }}최소 높이와 최대 높이를 사용했습니다. min-height는 콘텐츠가 짧더라도 모달을 보기 좋게 유지하는 것이고, max-height는 고정 높이를 추가하는 대신 특정 값을 사용하여 높이를 제한하는 것입니다.
경험을 디자인할 때는 너비와 높이를 고려하는 것이 가장 좋습니다. 브라우저의 크기를 수직으로 조정하는 것은 약간 이상할 수 있지만 장점이 있습니다. 이 기사에서는 수직 테스트의 중요성과 수직 테스트를 수행하는 방법에 대해 논의합니다. 마지막으로 smartmi 사용자에게 유용할 수 있는 몇 가지 예와 사용 사례를 제안합니다.
위 내용은 반응형 웹페이지의 높이 디자인에 관한 내용입니다. 브라우저의 높이를 낮춰야 하나요? 자세한 내용은 이 사이트의 다른 관련 기사를 주목해 주세요!