먼저 iPhone X 모델이 어떻게 생겼는지 살펴 보겠습니다.
위 그림에서 Iphonex 모델은 머리와 바닥에 두 개의 새로운 영역이 있으므로 웹앱 표시를 용이하게 하려면 이 유형의 모델에 대해 일부 조정이 필요합니다.
h5로 제작된 모바일 페이지의 경우 일반적인 레이아웃은 머리 + 몸통 + 하단 3단 모드로, 머리와 상단이 고정되어 있으며, 몸통에 있는 내용을 스크롤할 수 있는 형태는 다음과 같습니다.
<div class=page> <header></header> <main></main> <footer></footer> </div>
다만, 아이폰의 새로운 CSS 속성을 사용하지 않을 경우, 이런 상황에서는 아이폰과 함께 제공되는 숨쉬는 빛에 의해 하단 네비게이션 바가 가려지는 현상이 발생합니다. 여러 가지 해결 방법을 확인해보세요
저는 vue 프레임워크를 사용하고 있습니다. index.html 페이지에 다음을 추가해야 합니다.
<메타 이름=뷰포트 콘텐츠=너비=장치-너비,뷰포트-핏=커버>
그런 다음 공개 app.vue 페이지에서 각 구성 요소의 표시가 여기의 router-view로 대체되므로 여기에서 공개 헤더 표시줄을 처리할 수 있습니다. 구체적인 레이아웃은 다음과 같습니다.
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></템플릿>위 레이아웃에서는 placeholder_top 클래스가 있는 div에 대해 다음을 작성합니다.
.placeholder_top { 위치: 고정; 상단: 0; 너비: 10rem; 배경색: #303030; 높이: 상수(안전 영역-삽입-상단); ); Z-색인: 999;}이 경우 앞으로는 별도의 구성 요소에 대한 상단 표시줄 문제를 더 이상 처리할 필요가 없습니다. 다음으로 앞서 언급한 헤더 문제를 처리할 수 있습니다. 일반적으로 대부분의 헤더는 공용 구성 요소에 캡슐화됩니다. 여기서 app.vue 페이지에 삽입한 요소의 영향으로 헤드의 CSS 작성 방법도 약간 수정해야 합니다. 헤드 구성 요소의 페이지 레이아웃은 다음과 같습니다.
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> 탐색 콘텐츠</div> <div class=placeholder></div> </header></ 템플릿>페이지의 CSS는 다음과 같습니다
헤더{배경색: #303030; .title{ 위치: 고정; 상단: 상수(안전 영역-삽입-상단); 상단: env(안전 영역-삽입-상단); 높이: 88px; z-색인: 999; .placeholder{ 높이: 88px; 10rem;이렇게 작성하면 헤드 내비게이션 바는 휴대폰의 상태 표시줄 아래에 위치하며 창에 영향을 주지 않으며 Android 및 iOS 모델과 호환됩니다(이러한 호환성 문제는 iOS의 시스템 문제도 포함하지만 이 기사는 아직 없습니다) 관련된)
이제 메인 영역의 처리를 살펴보겠습니다. 위의 헤더 컴포넌트가 처리되었으므로 메인 레이아웃은 다음과 같습니다.
메인 {패딩 상단: 상수(안전 영역 삽입 상단); 패딩 상단: 환경(안전 영역 삽입 상단); 패딩 하단: 계산(88px + 상수(안전 영역 삽입 하단) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps: 여기서 설명하겠습니다. 현재 페이지에 하단 탐색 모음이 없을 때 다음 두 줄이 사용됩니다.
패딩 바닥: 상수(안전 영역-삽입 바닥); 패딩 바닥: env(안전 영역 삽입 바닥);},
메인 레이아웃이 준비되었습니다. 내용을 직접 작성하시면 됩니다.
그런 다음 하단의 바닥글 레이아웃을 살펴보세요.
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> 하단 콘텐츠</div></footer></template>하단 내용의 CSS는 다음과 같습니다.
바닥글{ 위치: 고정; 하단: 0; 너비: 10rem; 높이: calc(88px + 상수(안전 영역-삽입-바닥)); calc(88px + env- 하단)); 배경색: #303030; .foot{ 위치: 절대; 상단: 0; 너비: 10rem; 88px }}이렇게 작성하면 하단 내비게이션 풋의 콘텐츠가 휴대폰과 함께 제공되는 호흡등에 의해 차단되지 않습니다.
따라서 이러한 종류의 웹앱 적응에 사용해야 할 CSS 작성 방법은 다음과 같이 요약할 수 있습니다.
위치: 고정; 상단: 상수(안전 영역-삽입-상단); 하단: 상수(안전 영역-삽입-하단); -inset-bottom); 상단: calc(1rem + 상수(안전 영역-삽입-상단)); 상단: calc(1rem + env(안전 영역-삽입-상단)); calc(1rem + 상수(안전 영역-삽입-하단)); 하단: calc(1rem + env(안전 영역-삽입-하단));
ps: 위의 글에서는 style={position:fixposition?'absolute':'fixed'}라고 쓰여 있습니다. 이는 사용자가 입력 상자를 클릭할 때 고정된 요소의 위치가 부정확해지는 문제를 해결하기 위한 것입니다. 소프트 키보드가 나타납니다. 관심이 있으시면 이 기사에서 지금은 논의하지 않을 것입니다.
여기서는 실제 필요에 따라 다양한 작성 방법을 사용할 수 있습니다. 일반적인 레이아웃 논리에서 크게 벗어나지 않는 것이 좋습니다. 또한, 실제 기계 테스트 및 스타일 문제가 있는 경우 통일된 처리와 편리한 유지 관리를 위해 이렇게 작성하는 것이 좋습니다. 레이아웃 호환성으로 인해 발생하는 문제를 발견하면 실제 머신 디버깅을 사용할 수 있습니다. 이 방법은 PC 브라우저를 사용하여 웹앱을 디버깅하고 요소를 검토하는 것입니다. 이렇게 하면 기본적으로 대부분의 스타일 문제를 해결할 수 있습니다. 다음에는 실제 머신 디버깅에 대해 작성하겠습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.