Css 스타일 레이아웃 및 rem 사용법 정렬

뷰포트(viewport)는 웹페이지의 최상위 블록 요소를 제한하는 데 사용됩니다. 즉, 웹페이지가 먼저 뷰포트에 렌더링된 다음 다시 배치됩니다. 창에서 웹페이지의 렌더링 과정은 다음과 같습니다.

PC 뷰포트의 크기는 브라우저의 크기와 동일하므로 웹페이지는 다음과 같습니다. 브라우저 창에 1:1로 배치되는 반면, 모바일 뷰포트의 너비는 모바일 화면보다 일반적으로 980px 또는 1024px입니다. , 전체 웹페이지를 모바일 화면에 표시하기 위해 전체 뷰포트가 화면 너비에 맞게 전체적으로 조정되어 웹페이지가 전체적으로 확대되어 표시됩니다.

방법 뷰포트 설정 및 뷰포트 페이지 크기 조정 비활성화는 Baidu에서 직접 찾을 수 있습니다.

(주로 모바일 및 PC 웹페이지의 경우 페이지 크기 확대 및 축소 효과를 달성해야 함)

거기 아마도 다음 유형일 것입니다.

1. 유동 레이아웃

유동 레이아웃은 실제로 너비에 대한 백분율과 고정 높이입니다. 값 레이아웃 방법, 너비는 적응하기 위해 백분율로 사용됩니다. 다양한 너비의 화면에.

휴대폰의 다양한 화면 크기에 적응하기 위해 요소의 너비를 정의할 때 백분율을 작성할 수 있습니다. 모든 너비는 적응 가능합니다. 높이 방향, 웹 페이지의 높이는 가변적이므로 높이를 고정된 값(px)으로 작성할 수 있습니다. 이 레이아웃 방법을 유동 레이아웃이라고 합니다.

두 가지 개념에 주목하세요

2. 유연한 상자 모델 레이아웃 flex

이 레이아웃 방법은 CSS3의 몇 가지 새로운 보조 레이아웃 스타일 속성을 통해 만들어집니다. 배치되어 있습니다.

3. rem 레이아웃

rem은 상대적인 길이 단위입니다. 이 길이 단위를 통해 요소의 너비와 높이를 비례적으로 조정하여 다양한 너비의 화면에 적응할 수 있습니다.

4. 반응형 레이아웃(미디어 쿼리)

스타일을 통해 화면 너비를 동적으로 쿼리하고, 다양한 너비의 화면 레이아웃에 맞게 스타일을 동적으로 전환합니다.

부트스트랩이 가장 일반적인 것입니다.

추가 예정

실제 개발에서는 PC 페이지에서 rem+를 사용하여 반응형 스케일링(즉, 적응형)을 구현해야 합니다. 유연한 레이아웃은 보다 현실적이고 이상적인 솔루션입니다

모바일 단말기는 제품의 디자인 요구 사항에 따라 rem 레이아웃 또는 px 구현(주로 flex 사용)을 사용할 수 있습니다.

css3에서는 다음과 같이 규정합니다. 1rem의 크기는 루트 요소 의 글꼴 크기 값입니다.

Rem은 실제로 단위, 즉 상대 단위 루트 em입니다. rem은 html 요소의 글꼴 크기에 대한 루트(루트 요소의 크기) 단위입니다.

rem 레이아웃의 원리

는 HTML 루트 요소를 기반으로 웹페이지의 레이아웃을 제어하여 적응형 크기 조정과 유사한 레이아웃을 달성하는 것입니다.

rem의 장점

HTML 텍스트의 크기를 수정하면 페이지의 요소 크기를 변경하여 페이지를 전반적으로 제어할 수 있습니다.

rem의 역할

루트 요소인 의 글꼴 크기를 설정하여 HTML 문서 전체의 글꼴 크기, 요소 너비와 높이, 내부 및 외부 여백 등을 제어할 수 있으며, 모바일 장치의 너비와 크기에 따라 적응을 실현합니다. 모든 장치가 일관된 페이지 효과를 표시합니다.

간단한 사용법

vscode에 cssrem 플러그인을 설치하면 rem 값이 자동으로 계산됩니다.

구체적인 설정은 다음과 같습니다

참고: 설정 후 vscode 소프트웨어를 다시 시작해야 합니다. 그렇지 않으면 계산된 rem 값이 잘못됩니다.

추가 예정

js 또는 CSS 미디어 쿼리를 전달할 수 있습니다.

추가 예정