순수 CSS에서 화면 크기 얻기

우리 모두는 CSS가 웹 개발에서 가장 어려운 부분이라는 것을 알고 있습니다. 하지만 요즘은 더욱 어려워졌습니다.

믿지 못하겠지만 이제 CSS는 속성을 정의하고 계산을 수행하며 화면 크기를 직접 가져올 수도 있습니다! 이 기사에서는 이를 수행하는 방법을 설명합니다.

속성 정의

@property 규칙은 개발자가 사용자 정의 속성을 생성하고 유형, 상속 및 초기 값을 설정할 수 있도록 하는 CSS의 새로운 기능입니다. 이 기능을 사용하면 특정 값을 읽고 이를 사용자 정의 속성에 전달할 수 있습니다.

아래 예에서는 각각 화면의 너비와 높이를 나타내는 두 개의 사용자 정의 속성 --w_raw 및 --h_raw를 정의합니다.

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• 구문: '<길이>' 속성 유형이 길이임을 지정합니다.
• 상속: true는 속성이 상속될 수 있음을 나타냅니다.
• 초기값은 속성의 초기값을 뷰포트의 너비와 높이인 100vw 및 100vh로 설정합니다.

장치 제거

이제 화면 너비와 높이 값을 얻었지만 여전히 단위가 포함되어 있습니다. 순수한 숫자 값을 얻기 위해 단위를 어떻게 제거할 수 있습니까? 이는 수학의 문제이므로 CSS의 수학적 도구인 atan2(y, x) 및 tan()를 사용해야 합니다.

• atan2(y, x) 함수는 x축에서 점(x, y)까지의 각도(라디안 단위)를 반환합니다.
• tan() 함수는 주어진 각도의 탄젠트를 계산합니다.

이들을 결합하면 순수한 숫자 값을 얻을 수 있습니다. 여기서는 var(--w_raw) 및 1px를 매개변수로 전달하여 너비의 각도를 계산한 후 숫자로 변환합니다. 이런 방식으로 너비와 높이를 단위 없는 값으로 변환하고 이를 :root의 변수에 저장합니다.

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

숫자 표시

이제 숫자 값이 CSS에 저장되었으니 어떻게 표시하나요? 중요한 것은 카운터입니다!

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

CSS 콘텐츠를 표시하기 위해 본문에 ::before 의사 요소를 만듭니다.

• counter-reset은 카운터 h 및 w를 초기화하고 해당 값을 var(--h) 및 var(--w)로 설정합니다.
• 내용: 카운터(w) "x" 카운터(h); 너비 및 높이 카운터를 "너비 x 높이" 형식으로 표시합니다.

완료!

이제 화면 크기 표시기가 순전히 CSS로 구현되었습니다.

브라우저는 --w 및 --h를 실시간으로 업데이트하여 페이지에 표시합니다. 전체 프로세스에는 JavaScript가 전혀 없습니다.

여기를 클릭하여 온라인 데모를 사용해 볼 수 있습니다.

위 내용은 순수 CSS에서 화면 크기 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!