HTML5 반응형 레이아웃 기본 사항(1)

HTML5 반응형 레이아웃(1)

모바일 개발을 위한 레이아웃 방법 - 유동적 레이아웃

Fluid Layout이라는 개념을 처음 접하시는 분들은 이 개념이 매우 고급스럽다고 생각하시겠지만, HTML 데스크톱 웹 개발 경험이 있는 분들이라면 실제로는 아주 간단하다는 것을 알게 될 것입니다. 실제로 유동 레이아웃은 다양한 모바일 크기에 맞게 데스크톱의 일부 하드 코딩된 레이아웃을 백분율로 변경했습니다.

플로우 레이아웃은 일반 용어로 백분율 레이아웃이라고도 하며 일반적으로 다음 사항을 포함합니다.

• 폭 비율

• 위치 비율

• px를 em으로 바꾸고 rem

• 탄력적 그림 이러한 백분율을 설정하는 참조 개체는 휴대폰의 화면 크기에 따라 조정되며 크기 조정을 통해 특정 효과를 얻습니다.

유동 레이아웃을 사용해야 하는 이유 ? 모바일 단말기에 적응하시겠습니까?

고정 픽셀 크기 웹페이지는 고정 픽셀 크기 디스플레이를 일치시키는 가장 쉬운 방법입니다. 하지만 이 방법은 향후 웹페이지에 완전히 호환되는 제작 방법이 아닙니다. 알려지지 않은 장치에 적응할 수 있는 몇 가지 방법이 필요합니다. 고정 픽셀 크기(960/980)는 미래에도 보장되지 않습니다.

백분율 사용 방법 레이아웃 페이지?

크기 백분율:

웹페이지를 고정 레이아웃에서 백분율 레이아웃으로 수정:

기억해야 할 필수 공식: 대상 요소 너비 / 컨텍스트 요소 너비 = 백분율 너비.

PS: 여기서 컨텍스트 요소의 너비는 이와 연결된 상위 요소의 너비를 나타내며, 이는 하위 요소의 너비 비율에 직접적인 영향을 미칩니다.

포지션 비율:

기본적으로 크기 비율, 즉 원래 고정 마진 또는 위치 거리를 백분율로 환산

예:

페이지 왼쪽이 50px이고 컨텍스트 너비가 320px, 즉 50/320=15.625%

소수점 5자리를 예약하세요.

em:

em의 기능은 일반적으로 글꼴 크기를 설정하고, 상위 글꼴 크기를 표준 글꼴 크기로 설정하고, em을 통해 글꼴 비율을 제어하는 ​​것입니다.

• em 값은 고정되어 있지 않습니다.

• em은 상위 요소의 글꼴 크기를 상속받습니다.

렘:

em은 글꼴 표시 비율을 인식하고 화면 크기에 비례하여 글꼴 크기를 변경할 수 있지만 실제 개발 과정에서 구조적 중첩이 발생하면 상위 글꼴이 비율이 변경되면 부모의 글꼴 변경에 따라 자식 요소의 글꼴도 비례적으로 변경됩니다. em을 사용하여 글꼴을 변경하면 계산량이 매우 커져 개발에 어느 정도 부담이 될 수 있습니다.

Css3에 HTML 태그를 기반으로만 변경되는 새로운 단위 rem이 도입되었습니다.

rem은 root em을 의미하고, em의 루트는 html인데, 이는 html을 기준으로만 비율이 변경된다는 의미입니다.

유연한 이미지:

이미지 설정 너비:100%, 또는 배경 크기:100% 100%.

사진 설정 임계값: 최대 너비.

는 사진의 최대값과 최소값을 설정할 수 있습니다.

물론 유동적인 레이아웃은 모바일 단말에 적응하기 위한 방법일 뿐 반응형 웹 페이지의 효과를 얻을 수는 없습니다. 나중에 미디어 쿼리라는 또 다른 적응 방법을 소개하겠습니다. 두 가지 적응 방법을 결합하면 최종 반응형 레이아웃 효과를 얻을 수 있습니다.

위 내용은 HTML5 반응형 레이아웃 기본(1) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!