반응형 레이아웃 심층 분석

개념

반응형 레이아웃은 반응형 디자인 솔루션을 제시하는 것입니다. 구체적인 점은 다양한 장치에서 웹 페이지가 자동으로 화면 너비를 식별하고 장치의 표시 영역(일반적으로 화면 너비를 의미하지만 다른 것일 수도 있음)에 따라 다른 콘텐츠를 표시할 수 있다는 것입니다. 아래에서 자세히 설명할 수 있습니다.) 효과. 간단한 포인트는 PC와 모바일 단말 모두에서 사용할 수 있는 레이아웃을 디자인하는 것입니다.

반응형 레이아웃은 어떻게 구현하나요?

3가지 인기 있는 방법이 있습니다

1, 백분율

각 상자의 너비를 백분율로 설정하면 달성됩니다.

장점 : 간단하고 편리함

2

, 메타 태그코드 조각은 다음과 같습니다.

주로 모바일 화면에 맞게 코드를 조정하는 이름은 뷰포트입니다. 메타 태그, 즉 "뷰포트"를 로드해야 할 때 읽습니다. 너비는 장치 너비(장치 너비)와 동일해야 하며, 이는 주로 브라우저에 레이아웃 뷰포트의 너비를 장치의 최적 너비로 설정하도록 지시합니다. , 초기 스케일(스케일링 비율)은 1입니다. 이는 로드 시 미디어 쿼리를 용이하게 하기 위해 원래 크기를 유지하면서 장치의 너비를 가져옵니다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

3

, @media 미디어 쿼리 CSS 코드 세그먼트는

입니다. 여기서 첫 번째 화면은 화면을 의미하며 여기에는 all(모든 장치용), 인쇄(프린터 및 인쇄 미리보기용), 음성(화면 판독기 및 기타 사운드 생성 장치용)을 포함하는 많은 매개변수가 있습니다.

@media screen and (min-width: 10rem) and (max-width: 20rem) { ... }

및를 사용하여 여러 상황을 나란히 표시하고 최소 너비와 최대 너비를 사용하여 표시할 화면 크기를 정의합니다.

위 예시는 미디어 쿼리 화면입니다. 최소 너비는 10rem, 최대 너비는 20rem입니다. 중괄호 안에 스타일이나 기타 기능을 구현하기 위해 장치 너비를 사용합니다. 그 안의 rem은 px나 em 등과 같은 단위로 변경될 수도 있습니다.

장점:

이제 대부분의 반응형 레이아웃은 @media를 사용하여 구현되며 작성할 수 있습니다. 다수의 공개 스타일. 화면에 적응해야 하는 경우 중괄호 안에 해당 기능을 추가하여 반응형 레이아웃을 얻을 수 있습니다.

단점:

동일한 클래스에 대해 서로 다른 스타일을 작성해야 할 수도 있고, 코드가 더 복잡하고 약간 더 어렵습니다.

애플리케이션에서 반응성을 구현하기 위해 어떤 방법을 사용하나요?

세 가지 방법을 번갈아 가며 적절한 곳에 적절한 방법을 사용하는 것이 좋습니다.

레이아웃 과정에서 너비 비율과 미디어 쿼리는 일반적으로 같은 의미로 사용됩니다. 웹 페이지를 로드하기 전에 메타 태그를 추가하여 뷰포트의 콘텐츠를 정의하는 것이 더 편리합니다. . 모바일 반응성. 장치 호환성도 고려됩니다.

반응형 디자인에 대한 일반적인 접근 방식은 타겟 사용자의 주요 액세스 장치 유형을 기반으로 3~4가지 레이아웃을 만드는 것입니다. . 각 레이아웃에는 범위가 있습니다. 예를 들어 작은 화면의 휴대폰에서는 해상도를 [320,640]으로 설정할 수 있습니다. 그런 다음 각 레이아웃을 별도로 디자인하면 됩니다. 일반적으로 각 레이아웃은 주로 모듈의 배열 순서를 조정하며, 콘텐츠 조정이 적을수록 좋습니다(사용자 적응 비용을 최소화하기 위해).

반응형 장점

기존 Flexbox In과 비교 이에 비해 반응형 레이아웃은 사용자 장치의 변화에 ​​따라 다양한 효과를 보여주는 데 더 좋고 더 적극적입니다. 유연한 상자보다 더 유연하고 가독성이 좋습니다. 반응형 솔루션은 모든 디바이스의 적응형 문제를 해결합니다.

대응적 단점

개발 및 대응 난이도가 높음 CSS 파일은 여러 개일 수도 있고 단일일 수도 있습니다.

이 질문은 심층 분석에 관한 것이지만 실제로는 반응형 코드를 최적화하는 다른 방법도 있습니다. 개선하세요. 실수가 있으면 수정해 주시기 바랍니다.

위 내용은 반응형 레이아웃에 대한 심층 분석입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!