모바일 우선 디자인은 모바일용 웹사이트를 먼저 구축한 다음 CSS 미디어 쿼리를 사용하여 태블릿에서 데스크톱에 이르기까지 더 큰 화면 크기에서 웹사이트가 표시되는 방식을 제어하는 작업을 말합니다. 즉, 미디어 쿼리를 사용하여 웹사이트를 반응형(다양한 화면 크기에 적응)으로 만듭니다.
미디어 쿼리를 사용할 때 이를 중단점이라고 합니다. 따라서 웹사이트의 레이아웃이 모바일 레이아웃에서 800px 화면 너비의 태블릿 레이아웃으로 전환되어야 한다고 결정했다면 다음과 같은 미디어 쿼리를 생성합니다.
@media screen and (min-width: 800px) {
/* Add Tablet styles here */
}이제 800px가 첫 번째 중단점입니다.
다음과 같이 데스크탑 중단점이 1200px가 되도록 결정했다고 가정해 보겠습니다.
@media screen and (min-width: 1200px) {
/* Add Desktop styles here */
}그것이 두 번째 중단점입니다. 이제 총 2개의 중단점이 있습니다.
다음은 위에 표시된 중단점 모델을 사용하는 레이아웃의 빠른 데모입니다.
https://codepen.io/StrengthandFreedom/pen/abzywPd
보시다시피 모바일:0-800px, 태블릿:800-1200px, 데스크톱:1200-이상, 세 가지 다른 화면 크기 범위가 있으므로 CSS Media를 사용하여 총 2개의 중단점을 만들어야 합니다. 쿼리.
위의 예는 간단한 것이지만 요점을 파악해야 합니다. 글꼴 크기에서 레이아웃 너비에 이르기까지 중단점 사이의 모든 것을 조정할 수 있습니다.
중단점이 2개 이상 필요한 경우 어떻게 합니까?
일부 상황에서는 몇 가지 중단점을 사용하여 더 세분화된 접근 방식이 필요합니다. 100에서 200픽셀 정도마다 중단점을 사용하여 최대 10개를 사용하는 웹사이트를 본 적이 있습니다.
대부분의 사용 사례에서 이는 아마도 과도합니다.
웹사이트에 이상적인 중단점 수는 얼마입니까?
없다. 상황에 따라 결정을 내려야 합니다. 웹 사이트가 복잡할수록 대상 고객이 사용하는 모든 중요한 장치/화면 크기에서 웹 사이트를 표시할 수 있도록 하려면 일반적으로 더 많은 중단점이 필요합니다.
경험에 비추어 볼 때 평균적인 웹사이트는 대부분의 기반을 커버하기 위해 2~4개의 중단점이 필요합니다. 저는 4로 가는 경향이 있습니다.
이미 2개의 중단점을 사용하는 예를 보았으니 이제 4개를 사용하는 또 다른 예를 보겠습니다.
4개의 중단점이 있는 반응형 레이아웃
위에서 동일한 기사 레이아웃을 사용하여 더 많은 제어를 제공하기 위해 몇 가지 추가 중단점을 추가해 보겠습니다. 모바일에서 0에서 800픽셀로 점프하는 것은 너무 크다고 생각합니다. 특히 핸드헬드 장치의 가로 모드에서 이것이 항상 제대로 작동하지 않는다는 것을 알 수 있습니다.
그 이유는 우리가 사용하는 글꼴 크기가 큰 휴대용 장치에서 잘 작동하지만 h1(헤드라인)이 약간 압도적이기 때문입니다. 동시에 콘텐츠 너비가 500px 너비 지점을 초과하면 너무 넓어서 측정값(줄 길이)이 너무 길어지고 한 줄에 너무 많은 문자가 있어 판독기 친화적이지 않습니다. 이상적으로는 최적의 읽기를 위해 줄 길이가 줄당 40~80자 정도가 되기를 원합니다.
이 문제를 극복하기 위해 첫 번째 중단점을 480px에 추가한 다음 1200px를 데스크톱 및 상위 중단점으로 사용하는 대신 1900px(정말 큰 화면의 경우)에 다른 중단점을 추가하겠습니다.
여기에서 4가지 중단점 데모를 확인하세요.
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
브라우저 창의 크기를 조정하면 2-중단점 예제와 비교하여 4-중단점 레이아웃으로 타이포그래피가 더 우아하게 확장 및 축소(적응)되는 것을 볼 수 있습니다. 모바일과 태블릿 사이에 추가 중단점을 통해 콘텐츠 너비, 간격(패딩/여백) 및 글꼴 크기를 보다 정확하게 제어할 수 있기 때문입니다.
1900px 중단점은 오늘날 점점 더 많은 사람들이 사용하고 있으므로 간과해서는 안 되는 외부 모니터와 같은 정말 큰 화면을 위해 디자인하는 경우에 유용합니다.
웹사이트에서 중단점을 하나만 사용하여 벗어날 수 있습니까? ?
나는 물건을 단순하게 유지하는 것을 좋아합니다. 시스템에서 움직이는 부품이 적을수록 유지 관리가 더 쉽습니다. 하지만 레이아웃을 간단하게 만드는 데는 한계가 있습니다.
일부 디자이너와 개발자는 전체 웹 사이트에 대해 하나의 중단점만 사용합니다. 하나의 중단점은 다음을 사용한다는 의미입니다.
- 모바일 레이아웃
- 데스크탑 레이아웃
그런 다음 하나의 중단점은 일반적으로 600-960px 화면 너비 범위 주위에 정의됩니다.
이제 바로 다양한 화면 크기와 기기 유형에 맞게 디자인해야 하는 현대에 약간 낙관적입니다.
다양한 사용자(기기/화면 크기가 다름)에게 좋은 사용자 경험을 제공하는 데 관심이 있다면 일반적으로 둘 이상의 중단점이 필요합니다.
앞서 말한 것을 반복하려면:컨텍스트에 따라 디자인 결정을 내리십시오.