'max' 함수를 사용하지 않고 CSS에서 최대 너비를 어떻게 계산할 수 있나요?

CSS에서 최대 너비 계산

CSS에서는 현재 다음을 사용하여 다른 값의 함수로 최대 너비를 직접 계산하는 것이 불가능합니다. 최대 기능. max-width: calc(max(500px, 100% - 80px)) 또는 max-width: max(500px, calc(100% - 80px)))와 같은 구성으로 그렇게 하려고 하면 원하는 결과가 나오지 않습니다.

미디어 쿼리가 포함된 CSS 솔루션

그러나 미디어 쿼리를 사용하여 유사한 효과를 얻을 수 있습니다.

<code class="css">.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}</code>

이 예에서 . yourselector 요소는 뷰포트 크기에 따라 최대 너비를 갖습니다. 뷰포트가 500px보다 넓은 경우 최대 너비는 뷰포트 너비와 80px의 차이로 설정됩니다. 그러나 뷰포트가 500px 이하인 경우 최대 너비는 명시적으로 500px로 설정됩니다.

이 접근 방식은 미디어 쿼리를 효과적으로 사용하여 화면 크기에 따라 동적으로 최대 너비를 계산함으로써 원하는 기능을 모방합니다. max 기능을 제한적으로 사용하세요.

위 내용은 'max' 함수를 사용하지 않고 CSS에서 최대 너비를 어떻게 계산할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!