반응형 웹 디자인의 9가지 핵심 포인트

반응형 웹 디자인은 멀티스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 측면에서는 다소 어렵습니다. 고정된 페이지 크기, 밀리미터나 인치, 물리적 제한, 시작할 방법이 없습니다. 점점 더 많은 장치에서 웹사이트를 열 수 있게 되면서 데스크톱과 모바일에서 픽셀 디자인 방법을 독점적으로 사용하는 것도 과거의 일이 되었습니다. 그러므로 우리는 반응형 웹 디자인의 기본 원칙을 명확히 하고, 유동적인 웹 페이지에 맞서 싸우기보다는 수용해야 합니다.

1. 반응형 웹 디자인과 적응형 웹 디자인

같아 보이지만 다릅니다. 이 두 가지 방법은 서로를 보완합니다. 어느 것이 옳고 어느 것이 그르다는 말은 없습니다.

2. 콘텐츠 흐름

화면 크기가 작아질수록 콘텐츠가 세로 방향으로 더 많이 차지하게 되고, 아래 콘텐츠가 아래로 밀려나는 현상이 발생합니다. 픽셀과 포인트를 사용하여 디자인하는 경우 다소 까다로울 수 있지만 익숙해지면 이해가 될 것입니다.

3. 상대 단위

캔버스 크기는 데스크톱, 모바일 또는 그 사이의 모든 크기일 수 있습니다. 픽셀 밀도도 다양할 수 있으므로 다양한 화면에서 사용할 수 있는 유연한 단위가 필요합니다. 여기서는 백분율과 같은 상대적 단위가 유용합니다. 따라서 너비를 50%로 설정하면 화면의 절반(또는 열려 있는 브라우저 창의 크기인 보기)을 차지하게 됩니다.

4. 중단점

중단점을 사용하면 미리 정의된 지점에서 레이아웃을 변경할 수 있습니다. 예를 들어 데스크탑 화면에는 3개의 열이 있지만 모바일 화면에는 1개의 열만 있습니다. 대부분의 CSS 속성 은 중단점에 따라 변경될 수 있습니다. 일반적으로 특정 콘텐츠를 기반으로 중단점을 설정합니다. 문장이 화면 길이를 초과하는 경우 중단점을 추가할 수 있습니다. 그러나 중단점은 주의해서 사용하십시오. 무엇이 무엇이 영향을 미치는지 이해하기 어려울 때 혼란을 야기할 수 있습니다.

5. 최대값과 최소값 ​​

모바일 기기 등에서 콘텐츠가 화면 전체를 차지하는 것이 좋을 때도 있습니다. 그러나 TV 화면에 있고 동일한 콘텐츠가 화면 전체 너비를 차지하는 경우 일반적으로 의미가 없습니다. 여기서 Min/Max 값이 작용합니다. 예를 들어 width를 100%로 설정하고 max-width를 1000px로 설정하면 콘텐츠가 화면을 채우지만 1000px를 초과하지 않습니다.

6. 중첩된 객체

상대 위치를 기억하시나요? 다른 요소의 위치에 따라 많은 요소의 위치를 ​​제어하기 어렵기 때문에 컨테이너를 사용하여 요소를 래핑하면 이해하기 쉽고 깔끔해질 수 있습니다. 여기가 정적 단위(예: 픽셀)가 작동하는 곳입니다. 모듈화하고 싶지 않은 콘텐츠(로고나 버튼 등)에 유용합니다.

7. 모바일 우선순위 또는 데스크톱 우선순위

기술적으로 프로젝트가 작은 화면에서 시작하여 더 큰 화면이 되거나(모바일 우선), 그 반대의 경우(데스크톱 우선)는 없습니다. 많은 차이. 그러나 모바일을 먼저 시작할지 여부를 결정하는 데 도움이 될 수 있는 추가 제한 사항이 추가되었습니다. 일반적으로 처음에는 모두가 양쪽 끝을 함께 작성하므로 어느 쪽이 더 잘 실행되는지 확인하는 것이 좋습니다.

8. 웹 글꼴과 시스템 글꼴

귀하의 웹사이트에 멋진 Futura 또는 Didot 글꼴이 있었으면 좋겠나요? 웹폰트를 사용할 수 있습니다! 보기에는 좋지만, 글꼴을 많이 넣을수록 페이지를 로드하는 데 시간이 더 오래 걸린다는 점을 기억하세요. 반면에 시스템 글꼴을 로드하는 것은 매우 빠르지만 사용자가 로컬에 글꼴 세트를 가지고 있지 않으면 기본 글꼴로 돌아갑니다.

9. 비트맵과

벡터

아이콘에 많은 디테일과 멋진 효과를 추가하는 것에 대해 생각해 본 적이 있나요? 생각해보면 비트맵을 사용하는 것이 더 적절합니다. 그렇지 않은 경우 벡터 그래픽 사용을 고려해보세요. 비트맵의 경우 jpg, png 또는 gif 형식의 이미지를 사용하고, 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 상응하는 장점과 단점이 있습니다. 하지만

이미지의 크기도 고려해야 합니다. 웹페이지의 이미지는 최적화되어야 합니다. 반면 벡터 이미지는 일반적으로 크기가 더 작지만 일부 오래된 브라우저에서는 이를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거워질 수 있습니다. 그러니 신중하게 선택하세요.

위 내용은 반응형 웹 디자인의 9가지 핵심 포인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!