다른 모든 것을 유동화하십시오

우리 모두는 반응 형 디자인을 알고 있습니까? 우리는 미디어를 사용하여 쿼리합니다. 아니요, 이제 컨테이너를 사용하여 쿼리하지 않습니까? 때때로 우리는 Flexbox 또는 자동 스트리밍 메쉬를 영리하게 사용합니다. 우리가 대담하고 싶다면 유체 타이포그래피를 시도 할 수도 있습니다.

나는 반응 형 디자인이 종종 "이 크기에 대한 레이아웃 A, 레이아웃 C를위한 공간이 충분할 때까지 레이아웃 B"와 같은 개별 블록으로 나뉘어진다는 데 약간 익숙하지 않습니다. 이것은 괜찮습니다. 작동하며 화면을 Photofigva에서 정적 레이아웃으로 설계하는 워크 플로우에 적합합니다 (면책 조항, 소프트웨어 이름을 구성). 그러나이 과정은 저에게 타협 인 것 같습니다. 나는 항상 반응 형 디자인이 사용자에게 거의 보이지 않아야한다고 믿었습니다. 그들이 K-pop 티켓을 구매하고 모바일에서 내 웹 사이트를 방문하기 위해 줄을 섰을 때, 그들은 상사가 한 시간 전에 필요하다고 확신 한 거대한 곡선 게임 모니터에 앉아있는 경험과 얼마나 다른지 알지 못해서는 안됩니다.

이 간단한 영웅 배너와 모바일 등가를 고려하십시오. 죄송합니다. 디자인은 거칠다. 이미지는 AI에 의해 생성되지만이 기사의 유일한 AI 부분입니다.

몽구스와 텍스트의 위치와 크기는 다릅니다. 이를 달성하는 전통적인 방법은 다른 방법이 있습니까? 사실은

가

를 가지고 있음을 증명했습니다. 우리는 유체 조판의 개념을 거의 모든 것에 적용 할 수 있습니다. 이런 식으로, 우리는 부모 컨테이너의 크기로 매끄럽게 변하는 레이아웃을 가질 수 있습니다. 전환을 볼 수있는 사용자는 거의 없지만 결과에 감사 할 것입니다. 솔직히 말해서 그들은 할 것입니다.

시작 디자인 스타일 <del>媒体</del> 첫 번째 단계에서는 폭 쿼리와 중단 점을 사용할 때와 비슷한 레이아웃을 별도로 스타일링하겠습니다. 실제로 컨테이너 쿼리와 중단 점을 함께 사용하여 변경해야 할 속성을 쉽게 확인할 수 있습니다.

이것은 우리의 영웅 배너의 마크입니다. 변경되지 않습니다 :

이것은 광범위한 버전 관련 CSS : 입니다

나는 배경 이미지를 pseudo element에 추가하여 컨테이너 쿼리를 사용할 수 있도록 컨테이너가 자체적으로 쿼리 할 수 ​​없기 때문에 컨테이너 쿼리를 사용할 수 있습니다. 인라인 컨테이너를 사용하여 쿼리 (CQI) 장치를 쿼리 할 수 ​​있도록 나중에 보관할 것입니다. 이제 여기에 우리가 부드럽게 할 값 만 표시하는 컨테이너 쿼리가 있습니다. 라이브 데모에서 코드가 실행되는 것을 볼 수 있습니다. 일반적인 접근법의 한계를 보여주는 것은 완전히 정적입니다.

우리가 매끄럽게하자 이제 우리는 텍스트와 배경의 크기와 위치의 시작 및 종료점을 얻고 매끄럽게 만들 수 있습니다. 텍스트 크기는 이미 익숙한 방식으로 유체 타이포그래피를 사용합니다. 결과는 다음과 같습니다. 코드를 살펴본 후에는 이러한 표현을 설명하겠습니다. 먼저 텍스트 위치와 크기의 변화입니다.

이것은 몽골 이미지의 배경 위치와 크기입니다.

이제 컨테이너 쿼리를 완전히 삭제할 수 있습니다.

이

표현을 설명해 봅시다. 우리는

<div>
  <div>
    <h1>LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

속성의 표현으로 시작할 것입니다.

당신은 거기에 의견이 있음을 알게 될 것입니다. 이 표현은 왜 마법의 숫자가 나쁜지에 대한 좋은 생각입니다. 그러나 우리는 동시 방정식에 대한 해결책이기 때문에 여기에서 피할 수 없습니다. CSS는 그렇게 할 수 없습니다!

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

로 전달 된 상한과 하한은 충분히 명확하지만 중간의 표현은 이러한 동시 방정식에서 나옵니다.

… 여기서 F는 길이의 고정 크기 단위 수 (즉, px)이고 v는 가변 크기 단위 (CQI)입니다. 첫 번째 방정식에서, 우리는 1CQI가 12px와 같을 때 표현이 220px로 계산하기를 원한다고 말합니다. 두 번째 방정식에서, 우리는 1cqi가 3.6px 일 때 우리는 50px를 원 하며이 솔루션은 다음과 같습니다.

. clamp() 고정 장치가 다른 경우 변수 단위의 크기를 그에 따라 변경해야합니다. 그러므로 top 요소의 글꼴 크기에 대해서는

가 있습니다

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

이것은 컨테이너 너비가 1200px (기본 UA 스타일 시트, 16px에 비해 내 REM) 일 때 0.75REM과 동일하기 때문에이 방정식을 해결하고 있습니다.

목표의 단위에 따라 방정식이 다르다는 점에 유의해야합니다.

솔직히, 매번이 지루한 수학을하는 것은 지루합니다. 그래서 나는 당신이 사용할 수있는 계산기를 만들었습니다. 그것은 당신을 위해 방정식을 해결할뿐만 아니라 (CSS를 깔끔하게 유지하기 위해 최대 3 개의 소수점 이하) 표현과 함께 사용할 수있는 유용한 주석을 제공하여 마법의 숫자를 피하고 피하는 곳을 확인할 수 있습니다. 자유롭게 사용하십시오. 그렇습니다. 비슷한 계산기가 많이 있지만 타이포그래피에 중점을 두므로 제거 장치에 중점을 둡니다. CSS 전 처리기를 사용하는 경우 JavaScript를 포트 할 수 있습니다. clamp()현재

clamp() 기능은 엄격하게 필요하지 않습니다. 각각의 경우 clamp()의 경계는 컨테이너 폭이 360px 또는 1200px 일 때 값으로 설정됩니다. 컨테이너 자체는 이러한 제한으로 제한되므로 및 표현식은 결코 한계를 부르지 않아야합니다. 그러나 우리가 마음을 바꾸면 (우리는 그렇게하려고합니다), 나는 이와 같은 암시 적 경계를 찾고 유지하기가 어렵 기 때문에 min-width를 유지하는 것을 선호합니다. max-width clamp() 피해를 피하십시오 우리는 우리의 일이 끝났다고 생각할 수 있지만, 그렇지 않았습니다. 레이아웃은 여전히 ​​그다지 유용하지 않습니다. 텍스트는 몽구스의 머리 위에 있습니다. 나는 이것이 몽구스를 해치지 않을 것이라고 보장하지만, 나는 그것의 모습을 좋아하지 않는다. 텍스트가 몽구스를 치는 것을 막기 위해 약간의 변경을합시다. clamp() 첫 번째는 매우 간단합니다. 우리는 몽구스를 왼쪽으로 더 빨리 옮겨서 길을 만듭니다. 가장 쉬운 방법은 보간의 하단을 더 넓은 컨테이너로 변경하는 것입니다. 우리는 몽구스가 360px로 내려 오지 않고 450px에서 왼쪽으로 완전히 움직일 수 있도록 설정합니다. 모든 유체 표현의 시작 및 종말점이 동일한 너비와 정렬되어야하는 이유는 없으므로 다른 표현식을 360px로 부드럽게 낮출 수 있습니다.

신뢰할 수있는 계산기를 사용하면 배경 위치 속성의

표현을 변경하면됩니다.

이것은 상황을 개선하지만 완전히는 아닙니다. 더 빨리 움직이고 싶지 않으므로 다음으로 텍스트로가는 길을 살펴 보겠습니다. 현재 아래 그림과 같이 직선으로 이동합니다. 그러나 우리는 그것을 구부릴 수 있습니까? 예, 우리는 할 수 있습니다.

경로에서 구부리십시오 이를 수행 할 수있는 한 가지 방법은 상단 좌표에 대한 두 가지 다른 보간을 정의하고 선을 다른 각도로 배치 한 다음 가장 작은 것을 선택하는 것입니다. 이렇게하면 더 가파른 직선이 더 큰 컨테이너 너비에서 "승리"할 수 있지만 컨테이너 너비가 약 780px 미만인 경우 얕은 직선이 승리 값이됩니다. 결과는 몽구스를 놓치는 곡선이있는 직선입니다.

우리는

값 만 변경하지만 먼저 두 가지 중간 값을 계산해야합니다.

이 값의 경우, 신중하게 선택된 미드 포인트를 사용하여 공식적으로 계산하는 대신 원하는 결과를 얻을 때까지 엔드 포인트를 시도했습니다. 실험은 계산만큼 효과적이며 필요한 결과를 얻을 수 있습니다. 이 경우 사용자 지정 변수의 반복 보간으로 시작합니다. 컨테이너 쿼리를 사용하여 경로를 명시 적 부품으로 나눌 수 있었지만 수학 오버 헤드를 줄이지 않으며 기능을 사용하는 것이 더 간단합니다. 또한이 기사는 컨테이너 쿼리에 관한 것이 아닙니다.

텍스트는 이제이 경로를 따라 움직입니다. 라이브 데모를 열어 작동 방식을 확인하십시오. clamp() CSS는 모든 것을 할 수는 없습니다 계산에 대한 마지막 설명은 우리가 할 수 있고 할 수없는 것과 관련하여 한계가 있다는 것입니다. 첫 번째, 우리는 이미 약간 완화되었습니다. 즉, 이러한 보간은 선형입니다. 이것은 페이딩 또는 다른 복잡한 행동이 불가능하다는 것을 의미합니다.

또 다른 주요 제한 사항은 CSS가 이러한 방식으로 길이 값 만 생성 할 수 있으므로 컨테이너 또는 뷰포트 크기를 기반으로 유체 불투명도 또는 회전 각도를 순수한 CSS에 적용 할 수 없다는 것입니다. 제한은 브라우저에서

의 작동 방식이기 때문에 전처리 기는 여기서 도와 줄 수 없습니다. calc() 소량의 JavaScript에 의존 할 준비가되면 두 제한 사항을 모두 취소 할 수 있습니다. 컨테이너의 너비를 관찰하고 단위가없는 CSS 사용자 정의 속성을 설정하는 것으로 충분합니다. 나는 이것을 사용하여 다음과 같이 텍스트를 2 차 Bezier 곡선을 따르도록 할 것이다 :

. 나열 될 코드가 너무 많고 Bezier 곡선에 대한 수학적 설명이 너무 많지만 실시간 데모에서 확인하십시오.

와 같은 표현이 CSS에서 실패하지 않으면 JavaScript가 필요하지 않습니다. 그들은 두 길이 사이의 비율을 나타 내기 때문에 실패 할 이유가 없습니다. 1 인치에서 2.54cm가있는 것처럼 뷰포트 너비가 800px 일 때 1VW에는 8px가 있으므로

는 단위가없는 8 값으로 계산되어야합니다.

그러나 그들은 실패하기 때문에 우리가 할 수있는 것은 우리의 관점을 말하고 계속 움직입니다.

fluid 모든 레이아웃을 모두 해결하지는 않습니다 물론, 크기 쿼리가 필요한 일부 레이아웃이 있습니다. 적절한 경우 그렇게하지 않을 이유가 없습니다. 예를 들어, 쿼리를 사용하여 텍스트 배치의 그리드 정의 사이를 전환하는 동안 배경 크기와 위치를 부드럽게 조정하여 두 가지를 혼합하지 않아도됩니다. Mongoose 사례는 시연 목적으로 간단하게 설계되었습니다. calc(1vw / 1px) 나는 새로운 앵커 포지셔닝 API를 사용한 유체 포지셔닝 가능성에 대해 매우 흥분하고 있다고 덧붙이고 싶습니다. 앵커 포지셔닝을 사용하여 화면에서 두 개의 요소가 어떻게 흐르는지 정의 할 수 있지만 나중에 논의해야합니다. calc(1vw / 1px)

위 내용은 다른 모든 것을 유동화하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!