이 기사는 반응 형 웹 사이트 레이아웃 및 사용자 경험을 만드는 효과적인 기술을 탐구합니다. 다양한 화면 크기에 적응하는 유체 그리드를 구축하는 방법을 검토하여 장치 전체에서 일관된 사용자 경험을 보장합니다. 또한 작은 화면에서 대역폭 소비를 최소화하기 위해 풍부한 미디어, 특히 이미지를 최적화 할 것입니다.
다른 장치에서 사이트의 응답 성을 테스트하는 몇 가지 방법은 다음과 같습니다.
다양한 해상도에서 사이트 레이아웃을 테스트하기 위해 온라인으로 쉽게 구할 수있는 반응 형 웹 디자인 북마크를 사용하십시오.
인터넷 익스플로러 10과 함께 Windows 8 스냅 모드를 사용하여 스마트 폰 및 태블릿 뷰를 포함하여 다양한 화면 크기를 시뮬레이션합니다.
-
다양한 장치 및 화면 해상도에서 수동 테스트를 수행합니다 (그림 1과 같이).
그림 1. 반응 형 웹 디자인에 대한 기본 테스트
주요 고려 사항 :
> 화면 크기, 미디어 유형 및 기타 장치 특성에 따라 CSS3 미디어 쿼리를 활용하여 스타일 규칙을 생성합니다.
CSS 픽셀과 하드웨어 픽셀의 차이점, 특히 고 픽셀 밀도 스크린에 중요합니다.
모바일 우선 디자인 접근 방식을 채택하여 모바일 사용자 경험을 우선 순위를 정하고 더 큰 화면을 점차 향상시킵니다.
장치 기능을 기반으로 이미지 품질을 조정하기 위해 JavaScript 기술 또는 라이브러리를 사용하여 반응 형 이미지를 구현합니다.
는 비례 컨텐츠 디스플레이를 유지하기 위해 유체 그리드 및 중단 기반 스케일링을 활용합니다.
CSS 미디어 쿼리를 통한 글꼴 크기, 라인 간격 및 문자 간격을 조정하여 텍스트 가독성을 최적화하십시오.
최적화 된 키보드 동작을 위해 HTML5 입력 유형을 사용하여 모바일 장치의 형태 유용성 향상.
미디어 쿼리 및 그 너머 : -
전통적으로, 사용자 에이전트 스니핑은 장치 유형을 감지하고 사용자를 다른 사이트 버전으로 리디렉션하는 데 사용되었습니다. CSS3 미디어 쿼리는 컨텐츠 생성을 프레젠테이션에서 분리하는 우수한 접근 방식을 제공합니다. 이를 통해 개발자는 화면 크기, 미디어 유형 및 기타 장치 속성에서 조건부 스타일을 정의 할 수 있습니다. 그러나 다른 화면 크기에 대한 고정 폭 레이아웃을 만드는 것은 반응 형 디자인이 아닙니다. 비례 적 스케일링은 핵심입니다.
픽셀 이해 :
"픽셀 "의 의미는 고 픽셀 밀도 스크린의 출현으로 진화했습니다. w3c는 css pixel a 참조 픽셀 (또는 css pixel )를 정의하며, 이는 와 다릅니다. 그들 사이의 비율은 디바이스 픽셀 비율 입니다. 장치 픽셀 비율은 이미지 다운로드 최적화에 중요하지만 페이지 레이아웃을 지시해서는 안됩니다. 기기 전체에서 일관된 시각적 크기를 보장하기 위해 참조 픽셀 디자인에 중점을 둡니다. 미디어 쿼리를 사용하여 필요한 경우 특정 장치 픽셀 비율을 대상으로 할 수 있습니다.
GetDevicePixelratio와 같은 JavaScript 라이브러리는 추가 이미지 최적화를위한 장치 픽셀 비율을 계산하는 데 도움이 될 수 있습니다.
반응 형 레이아웃 기술 :
<code class="language-css">/* Note that device-pixel-ratio might need vendor prefixes */
@media screen and (device-pixel-ratio: 1.5) {
/* Adjust layout for 1.5 hardware pixels per reference pixel */
}
@media screen and (device-pixel-ratio: 2) {
/* Adjust layout for 2 hardware pixels per reference pixel */
}</code>
반응 형 레이아웃에는 두 가지 주요 기술이 포함됩니다. 레이아웃 변경이 필요한 곳의 중단 점을 식별하고 해당 중단 점 사이의 컨텐츠를 비례 적으로 스케일링합니다. 모바일 최초의 접근 방식이 권장되어 모바일 사용자의 우선 순위를 정하고 더 큰 화면을 점차 향상시킵니다. 재 설계된 Microsoft.com은 매력적인 사례 연구 역할을하며, 사이트가 다양한 화면 크기에 우아하게 적응할 수있는 방법을 보여주고 항상 사용 가능한 공간의 사용을 최대화합니다.
백분율 기반 너비는 유체 그리드 레이아웃을 달성하기위한 실용적인 방법입니다. 이를 CSS3 미디어 쿼리와 결합하면 특정 중단 점에서 레이아웃 변경이 가능하여 반응이 좋은 경험을 제공합니다. Gumby, Skeleton 및 CSS 그리드와 같은 프레임 워크는이 프로세스를 단순화 할 수 있습니다.
이미지 최적화 :
이미지는 종종 웹 사이트에서 가장 대역폭 집약적 인 부분입니다. CSS3는 사용자 정의 글꼴 (), 배경 그라디언트, 둥근 모서리 (), 2D 변환 및 상자/텍스트 그림자를 포함하여 이미지에 대한 의존도를 줄이기위한 몇 가지 기술을 제공합니다. 교체 할 수없는 이미지의 경우 JavaScript 기술과 라이브러리는 장치 기능 및 화면 해상도에 따라 적절한 이미지 크기를 동적으로로드 할 수 있습니다. 미디어 쿼리 리스너는 화면 크기가 변경됨에 따라 즉시 조정을 허용합니다. Filament Group의 기술, AdaptiveImages.com 및 Tyson Matanich 's Polyfill과 같은 라이브러리는이 목적에 유용한 도구를 제공합니다.
텍스트와 형식 최적화 :
반응 형 텍스트 스케일링에는 화면 너비를 기준으로 글꼴 크기, 라인 간격 및 문자 간격을 조정하여 가독성을 유지합니다. FitText와 같은 라이브러리가이를 지원할 수 있습니다. 양식의 경우, HTML5 입력 유형 (, 등)을 사용하면 최적화 된 키보드 레이아웃을 제공하여 터치 장치의 유용성을 향상시킵니다.
결론 :
반응 형 웹 디자인은 지속적인 진화이지만 여기에 설명 된 기술은 모든 장치에서 일관되고 매력적인 경험을 제공하는 웹 사이트를 만드는 견고한 기반을 제공합니다. 철저히 테스트하고 모바일 우선 접근 방식을 우선시해야합니다위 내용은 반응 형 웹 디자인의 일반적인 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
