CSS의 유체 인터페이스 사용

응답 능력은 모든 사이트의 핵심 기능이어야 한다.화면 크기가 증가하고 축소되고 있습니다.이로 인해 반응 능력은 현재 구도와 구조를 초월했다.우리는 텍스트와 요소의 크기와 주위의 간격을 조정해야 한다.대다수는 미디어 조회를 추가함으로써 이 점을 실현한다.그러나 페이지, 요소, 단점의 변화에 따라 미디어 조회를 추가하는 것은 유지보수할 수 없습니다.
vycke.dev을 재구성할 때 나는 미디어 조회에 대한 의존을 없애고 싶다.하지만 화면 크기에 따라 크기와 간격을 조정하고 싶습니다.나의 사이트는 유동성이 필요하다.CSS 변수와 CSS calc 함수를 사용하여 이 점을 실현할 수 있습니다.어떻게 된 건지 봐!

유체 크기 및 간격

나는 미디어로 간격값(예를 들어 padding과 margin)과 글꼴 크기를 조회했다.큰 스크린에서 나는 휴대전화보다 더 큰 글씨체 크기와 간격을 원한다.가용성을 높이고 공간 낭비를 줄이는 것이 목표다.그러나 미디어 조회에 대해 나는 모든 다른 단점을 검사하고 간격과 글꼴 크기를 어떻게 바꾸는지 확인해야 한다.유체 계면을 도입하다.
유체 인터페이스를 사용할 때 사이트의 크기가 자동으로 증가(예를 들어 16px과 20px 사이)할 때 속성을 선형적으로 확대할 수 있다.이를 위해서는 사이트 크기에 따라 값을 축소할 수 있는 비율(0과 1 사이의 값)을 정해야 한다.

비율을 결정하려면 먼저 사이트의 최소 너비와 최대 너비를 확정해야 한다.어떤 사이트들은 모든 사용 가능한 수준의 공간을 차지하지만, 많은 사이트들은 최대 폭을 가지고 있다.최소치와 최대치를 확정한 후에 우리는 아래의 공식으로 비율을 계산할 수 있다.이 비율을 통해 우리는 두 값 사이에서 선형으로 크기를 축소할 수 있다.

         min(space, max-sw) - min-sw
ratio = -----------------------------
              max-sw - min-sw

이 비율이 있으면 우리는 사이트의 수평 크기에 따라 임의의 크기(예를 들어 글씨체 크기나 간격)를 조정할 수 있다.

size = min-size + (max-size - min-size) × ratio

calc로 비율을 계산하다

이 개념을 실현하려면 CSS 변수와 calc 함수가 필요하다.보기에는 간단해 보이지만 실현하기에는 여전히 약간의 괴벽이 있다.그러나 우선 우리의 기본적인 가치관을 확인하자.이 실현에서 모든 사이즈는 단원이 없거나 rem(--unit 기반)이다.사이트마다 기본 글꼴 크기인 px이 1rem에 대응한다.이 기본값은 사용자가 설정할 수 있지만 사용자가 브라우저 설정에서 설정할 수도 있습니다.이것은 간단한 실현이다.이 값에 따라 우리는 초기 변수를 설정할 수 있다.

/* base values */
:root {
  --unit: 1rem;
  --min-width: 20; /* based on 16px */
  --max-width: 75; /* based on 16px */
}

기본값을 알고 나면 우리는 비율을 계산하기 시작할 수 있다.여기서 우리는 처리해야 할 괴벽을 찾았다.우리는 min CSS 함수를 사용하여 --area 값을 계산해야 하며, 우리는 그것으로 비율을 확정할 수 있다.그러나 이 함수는 항상 단위의 값을 가지고 비교해야 한다.따라서 --max-width에 --unit을 곱합니다.

INFO: when multiplying using calc, at least one value needs to be unitless. At least the right-hand side of a division needs to be unitless. Adding and subtracting need all values to be unitless, or have (varying) units.

--area 변수는 상술한 비율 방정식의 왼쪽이다.현재 우리는 --ratio을 계산할 수 있다.--area의 단위는 이미 rem이기 때문에 --ratio은 0rem과 1rem 사이의 값이 될 것이다.

/* ratio calculation */
:root {
  --screen: calc(min(100vw, var(--max-width) * var(--unit)));
  --area: calc(var(--screen) - var(--min-width) * var(--unit));
  --ratio: calc(var(--area) / (var(--max-width) - var(--min-width)));
}

치수와 연관된 디자인 태그 생성하기

0rem과 1rem 사이의 실제 화면 크기에 따라 우리는 사이트의 요소를 축소하기 시작할 수 있다.이를 위해 우리는 묘사한 비례 방정식을 사용했다.아래의 예를 봅시다.이 예는 문장의 생성 글꼴 크기를 계산한다.

/* example for a fluid article font-size */
:root {
  --min-size: 1.125rem;
  --max-size: 1.375rem;
  --scale: calc(var(--max-size) - var(--min-size));
  --size: calc(var(--min-size) + var(--scale) * var(--ratio));
}

작은 화면에서는 1.125rem, 큰 화면에서는 1.375rem의 글꼴 크기를 자랑한다.기본 글꼴 크기는 16px이며 화면 크기에 따라 정확한 글꼴 크기를 계산할 수 있습니다.화면 크기가 784px인 글꼴 크기는 20.109px이다.그러나 글씨체의 크기는 우리가 유동성을 응용할 수 있는 많은 부분 중의 하나이다.

단락과 제목의 글꼴 크기

원소s와 주변에 사용되는 각종 간격값.

사이트 로고와 아이콘의 크기.

이 모든 것은 자신의 유동성 계산을 할 수 있다.이것은 단독 디자인 표지일 수도 있고 부모 요소에서 확장할 수도 있다(예를 들어 em이 아니라 rem을 사용한다).

결론

vycke.dev을 재구성할 때 나는 미디어 조회의 수를 줄이고 싶지만 응답 능력을 유지하고 싶다.웹 사이트의 CSS 족적을 줄이고 싶습니다.하지만 가장 중요한 것은 제 CSS를 더욱 쉽게 유지할 수 있도록 하고 싶습니다.글꼴 크기, 요소 크기, 간격의 유동성을 늘리는 것은 이 목표를 실현하는 데 도움이 된다.이런 유동성이 작용하는 걸 보고 싶으세요?this 기사를 노트북이나 PC에서 열고 브라우저 창의 크기를 천천히 조정하면 됩니다.