CSS의 비교 함수: max(), min(), 클램프()

이 글에서는 CSS의 max(), min(), 클램프() 세 가지 비교 함수를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천: "css 비디오 튜토리얼"

CSS 비교 기능

세 가지 CSS 비교 기능이 있습니다:

• max()
• min()
• c 램프( )

min 및 max

CSS min 및 max 함수는 js 함수의 min 및 max와 유사하며 여러 속성 중에서 최소값 또는 최대값을 취하는 데 사용됩니다. 속성은 쉼표로 구분됩니다. 예시는 다음과 같습니다

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

그림과 같이 너비는 최소값 100px, 높이는 최대값 300px을 사용합니다.

clamp

clamp 함수는 3개의 매개변수를 전달해야 하며, 경계값을 처리하는 데 사용되는 최소값, 기본값, 최대값입니다. 기본값이 최대값보다 크면 최대값이 최소값보다 작을 때 최소값이 적용됩니다. 최소값과 최대값 사이에 있으면 기본값이 사용됩니다.

사용 방법

clamp(MIN,DEFAULT,MAX)

clamp는 max(MIN,min(DEFAULT,MAX))

Case

font-size: clamp(20px,10vw,40px);

분석에서 10vw가 20px보다 작을 때, 즉 페이지 너비가 200px 이하이면 글꼴의 최소 크기는 20px입니다. 10vw가 40px보다 크면, 즉 페이지 너비가 400px 이상이면 최대 글꼴 크기는 200px입니다. 400px인 경우 너비/10 계산식에 따라 계산됩니다. 아래에서

가 200px보다 작은지 확인하세요

400px보다 큼

200px과 400px 사이

호환성

이 세 가지 기능이 최근에 출시된 것이라 호환성이 별로 좋지 않다고 볼 수 있는데, 국내 브라우저는 모두 차단되어 있고, 최신 버전의 주류 브라우저에서는 기본적으로 지원이 가능하기 때문에 좋은 점입니다. 반응형 개발에서 이 세 가지 수학의 역할은 여전히 ​​매우 분명합니다. 앞으로도 반응형 개발에서 이 세 가지 기능의 비율은 점차 개선될 것입니다.

일반적인 사용 시나리오

다음은 몇 가지 일반적인 사용 시나리오

사이드바 응답

사이드바 레이아웃의 경우 사이드바의 너비가 고정되어 있어야 합니다. 반응형 디자인을 만들 때 최대 너비를 초과하는 것을 고려할 수 있습니다. vw를 사용하여 사이드바의 비율을 고정

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

글꼴 응답

클램프를 통해 최대값과 최소값을 제한하고, 중간에 있는 기본값이 창에 따라 변경됩니다

글꼴- size: 클램프(20px, 10vw, 40px);font-size: clamp(20px, 10vw, 40px);

渐变平滑过渡

渐变指定渐变的梯度线，按照一般操作会出现过渡不够平滑的情况，在移动端会有一条明显的过渡线

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

利用min修改一下，过渡会更加平滑一点

background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);

그라디언트 부드러운 전환

Gradient는 그라디언트의 그라디언트 선을 지정합니다. 일반 작업에 따라 전환됩니다. 모바일 단말기에는 분명히 부드럽지 않을 것입니다. 전환 라인

    .container{
      width: 1440px;
      max-width: 100%;
    }

min을 사용하여 수정하면 전환이 더 부드러워집니다.

배경: 선형 그라데이션(135deg, #2c3e50, #2c3e50 min (20vw, 60%), #3498db);

동적 컨테이너 너비

실제 응용 프로그램에서 예를 들어 바탕 화면의 너비를 제한하고 100% 표시하려는 경우 모바일에서는 이렇게 써야 합니다

    .container{
      width: min(1440px,100%);
    }

지금은 rrreee🎜만 아주 간단하고 명확합니다. 🎜🎜요약🎜🎜 이 세 가지 기능은 반응형 레이아웃 개발에 적합하며 호환성 문제를 고려할 필요가 없을 때 적절하게 사용할 수 있습니다. 그러나 호환성을 고려한다면 사용하지 않는 것이 좋습니다. 최근 CSS 기능과 관련된 내용을 정리해보았습니다. 계속해서 관심을 가져주세요. 🎜여기를 클릭하고 여기를 클릭하세요🎜🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 CSS의 비교 함수: max(), min(), 클램프()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!