레이아웃 성배 (성배 레이아웃) 가장 일반적인 사이트 레이아웃을 의미합니다. 위에서 아래로 페이지, 세 부분으로 나누어 져 있습니다 : 헤더 (헤더), 트렁크 (몸), 꼬리 (바닥 글). 네비게이션 메인 바, 사이드 왼쪽에서 오른쪽되는 몸통과 수평 세 열로 분할.
1 < 본체 > 2 < 헤더 > ... </ 헤더 > 3 < DIV 클래스 = "본체" > 4 < 주요 클래스 = "콘텐츠" > ... </ 주 > 5 < 탐색 클래스 = "탐색" > . .. </ NAV > 6 < 따로 클래스 = "광고" > ... </ 별도로 > 7 </ DIV > 8 <바닥 글 > ... </ 바닥 글 > 9 </ 몸 >
성배 레이아웃은 다음과 같은 레이아웃을 만들 수 있습니다 :
1. 고정 폭 레이아웃 : 페이지 폭의 고정 세트는 일반적으로 길이의 단위 픽셀 사용 (이동 단말) 다중 단말기에 적합하지 않은 상기 PC 측의 웹에서 일반적이다.
장점 : 더 나은 시장에있는 모든 장치 오늘날에 적응 : 우리는 다음과 같은 해상도에서 현재 주류 시장에 초점을 알고
고정 된 레이아웃에서, 페이지의 폭을 화소 값으로서 지정되어야한다.
1080 * 1920, 그래서 주변에 빈 부분이있을 것이다 : 예 피닉스를 들어, 자신의 폭 1000px, 내 컴퓨터의 해상도입니다.
이제 주요 사이트의 페이지 폭은 일반적으로 1000px, 그래서 더 많은 장비를 적용 할 수 있습니다.
2. 유체 레이아웃 : 일반적으로 길이 단위의 비율로, 페이지의 상대 폭을 설정합니다.
장점 : 페이지의 변경으로 페이지가 비율에 따라 변화를 따를 것이다, 그러나 이것은 변형의 목차 페이지를 만들 것입니다.
플로우 레이아웃은 기본 레이아웃 단위 크기 다른 부위마다 고정 측의 폭이다 다르다. 고정 폭 레이아웃 화소를 사용했지만 플로우 레이아웃의 비율이 사용되는 페이지는 양호한 가소성 유동성을 제공한다. 즉, 비율을 설정하여, 우리는 장비의 크기 나 화면 폭의 크기를 고려해야 할 필요가 없습니다, 당신은 각각의 경우에 대한 실행 가능한 해결책을 찾을 수 있습니다, 모든 장비의 크기를 수용 할 것이다 디자인의 크기 여야합니다. 흐름 레이아웃 밀접 미디어 쿼리 및 최적화 기술 스타일 관련이있다.
3. 반응 형 레이아웃 (또한 탄성 레이아웃라고도 함) 장치 정보를 검출함으로써, 일반적으로, 동일한 내용이 표시되지 않을, 사용자가 동일 페이지에 액세스하기 위해 다른 장치를 사용하여, 즉 경우, 페이지의 레이아웃을 결정 장비를 테스트 화면의 폭을 달성한다.
모바일 브라우저 컨트롤 레이아웃에 뷰포트 메타 태그를 사용하여
< 메타 이름 = "뷰포트" 콘텐츠 = "= 폭 소자 폭 초기 스케일 = 1, 최대 스케일 = 1" />
4. 레이아웃 그리드 (격자 배열) : 동일한 인공으로 페이지 폭의 길이는, 그 다음 동일한 길이의 단위로 일반적으로 길이의 비율로 사용하여, 측정 길이가 동일 조판 레이아웃의 단위로 이러한 배치 .
참고 : 몇 가지 더 레이아웃을 독립적이지, 실제 개발 과정은 종종 서로 조합하여 사용
고정 레이아웃 및 레이아웃의 차이 디자인 흐름 :
