CSS 계산으로 요소의 최대 너비를 결정할 수 있나요?

CSS 계산으로 최대 너비를 결정할 수 있나요?

두 값 중 작은 값입니다. 그러나 CSS 구문은 일반적으로 최대 너비에 대해 단일 값만 허용합니다.

잠재적 솔루션

한 가지 가능한 접근 방식은 다음과 같은 중첩 계산을 사용하는 것입니다.

<code class="css">max-width: calc(max(500px, 100% - 80px))</code>

그러나 이는 모든 브라우저에서 지원되는 것은 아닙니다.

또 다른 잠재적인 해결책은 미디어 쿼리를 사용하는 것입니다.

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

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

이 방법은 두 가지 규칙을 생성합니다. 하나는 더 넓은 화면에 대한 규칙입니다. 500px보다 작고 하나는 500px보다 좁은 화면에 사용됩니다. 두 번째 규칙은 첫 번째 규칙을 효과적으로 재정의하여 화면 너비가 해당 임계값보다 낮을 때 요소의 최대 너비가 500픽셀로 제한되도록 합니다.

위 내용은 CSS 계산으로 요소의 최대 너비를 결정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!