CSS의 `max-width` 속성 내에서 수학 표현식을 사용할 수 있나요?-CSS 튜토리얼-php.cn

CSS의 `max-width` 속성 내에서 수학 표현식을 사용할 수 있나요?

Patricia Arquette

풀어 주다： 2024-11-01 06:49:02

원래의

681명이 탐색했습니다.

Can You Use Mathematical Expressions within the `max-width` Property in CSS?

CSS에서 최대 너비 계산 달성

CSS의 max-width 속성 내에서 다음과 같은 수학적 표현을 활용하는 것이 가능합니까?

max-width: calc(max(500px, 100% - 80px))

로그인 후 복사

또는

max-width: max(500px, calc(100% - 80px)))

로그인 후 복사

답변:

이전에는 max-width 속성 내에서 직접 계산이 불가능했지만 최신 CSS에서는 미디어 쿼리를 사용하여 해결 방법을 도입했습니다.

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

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

로그인 후 복사

이 접근 방식은 최대 너비를 뷰포트 너비에 상대적인 최소 500px로 설정하여 상위 컨테이너가 500px보다 넓은 경우에도 요소가 해당 너비를 초과하지 않도록 합니다.

위 내용은 CSS의 `max-width` 속성 내에서 수학 표현식을 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!