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

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

가장 먼저 생각할 수 있는 것은 모든 블록 수준 요소의 너비, 높이, 여백 값 ​​(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>

위 코드에서 상위 요소 높이의 총 부분 수는 3이고, a의 높이는 1부분, b의 높이는 2부분을 차지합니다. 상위 요소의 높이가 100px이라고 가정하면 a의 높이는

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

마찬가지로 다음 속성을 사용하여 간격을 설정합니다: data-style-

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

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

Flex를 사용하여

구현하는 원리는 기본적으로 JS를 사용하는 것과 같습니다. flex를 사용한 구현은 단순히 JS 계산 대신

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

구체적인 원칙은 data-style-height 속성을 사용하여 요소의 높이를 설정하고 상위 요소인 <a href="http://www.php.php" cn .html target="_blank">디스플레이<p>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank"> 방향<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;: 열;

. 페이지가 초기화되면 JS는 이 값을 기반으로 flex-grow:属性值 요소를 요소로 설정합니다. 간격은 data-style-height 속성과 빈 콘텐츠가 있는 요소를 사용하여 구현됩니다.

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

그림을 사용하여

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

HTML:

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

CSS:

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

---

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