다양한 크기의 장치에 적응하는 구현

때때로 콘텐츠가 정확히 한 화면을 차지하고 다양한 크기의 기기에 맞게 조정되어야 하는 경우가 있습니다. 이것이 일부 장치에서 어떻게 만족스럽지 못한 디스플레이로 이어질지는 이야기하지 않고 구현 방법에 대해 직접 이야기하겠습니다.

가장 먼저 생각할 수 있는 것은 모든 블록 수준 요소의 너비, 높이, 여백 값 ​​(margin, padding) 페이지는 모두 백분율로 표시됩니다.
가로 방향, 너비, 가로 간격 값이 백분율 값인 경우 해당 값은 상위 요소의 너비를 기준으로 계산되므로 가로 방향의 다양한 크기의 장치에 적용할 수 있습니다.
세로 방향에서 높이 값이 백분율인 경우 해당 값은 상위 요소의 높이를 기준으로 계산됩니다. 그런데 세로 간격 값이 백분율이면 그 값은 상위 요소의 너비(높이가 아님)를 기준으로 계산됩니다. ㅎㅎ(무기력~~).

따라서 적응을 위해 수평 방향의 백분율 솔루션을 사용할 수 있습니다. 수직 방향에는 다른 솔루션이 필요합니다.

CSS3 미디어 쿼리를 사용할 수 있나요? 할 수 없습니다. 미디어 쿼리는 기기 높이에 대한 쿼리를 지원하지만 모든 기기의 높이를 열거하고 높이가 다른 각 기기에 대한 CSS 세트를 작성하는 것은 불가능합니다. 몇 가지 높이의 장치와만 호환되어야 한다면 이 솔루션을 고려해 볼 수 있습니다.

여기에 몇 가지 해결책이 있습니다.

JS를 사용하여

을 구현하는 것이 원칙입니다. data-style-height 속성을 사용하여 요소의 높이를 설정하는 것입니다. 🎜> 해당 값은 상위 요소 높이의 비율입니다. 페이지가 초기화되면 JS는 이 값, 상위 요소의 높이, 상위 요소의 총 높이 수를 기반으로 요소의 높이에 값을 할당합니다. 예를 들어

<p>
  <p id="a" data-style-height="1"></p>
  <p id="b" data-style-height="2"></p>
</p>

이고 b의 높이는 (1 / 3 * 100)px입니다. (2 / 3 * 100)px

margin-top, data-style-margin-bottom, data-style- 패딩 상단, 데이터 스타일-패딩 하단. 페이지가 초기화되면 JS는 속성 값을 기반으로 요소에 해당 간격을 할당합니다.

값이 0보다 큰 플렉스 요소가 상위 공간이 클 때 자동으로 커지는 기능을 사용합니다. flex-grow

구체적인 구현 코드는 여기를 참조하세요.

그림을 사용하여

상호작용이 필요하지 않은 콘텐츠라면 페이지 전체를 그림으로 만들 수 있습니다. 물론 이렇게 하면 사후관리가 좀 까다로워지겠죠.

HTML:

<img class="fullpage" src="...">

CSS:

html,body{
  height: 100%;
}
.fullpage{
  width: 100%;
  height: 100%;
}

위 내용은 다양한 크기의 장치에 적응하는 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!