CSS는 뷰포트 길이를 얻을 수 있었고 시간을 다시 추적 할 수 있습니다 ... (보기 참고) ... 2013! 놀랍게도, 그것은 10 년 전이었습니다. 요즘에는 뷰포트 너비를 얻는 것이
만큼 간단하지만 픽셀에서 이것이 무엇을 의미합니까? 백분율, 각도 또는 정수를 취하는 것과 같은 다른 속성은 어떻습니까?
화면 크기에 따라 요소의 불투명도를 변경하거나 회전하거나 애니메이션의 진행 상황을 설정하십시오. 먼저, 뷰포트가 정수 로 필요합니다 - 이것은 현재 CSS에서는 불가능합니다. 100vw
다음에 대해 이야기하고 싶은 것은 획기적인 발견이 아니며, 제인 오리 인은 2023 년에 훌륭하게 묘사했습니다. 요컨대, 우리는 및
삼각 함수를 포함하는 이상한 트릭 (또는 속성)을 사용할 수 있으며 길이 (예 : 뷰포트) 유형을 정수로 변환합니다. 이것은 에 대한 많은 새로운 레이아웃 가능성을 열어 주지만 첫 번째 경험은 Almanac 항목을 작성할 때였으며 이미지의 불투명도를 반응하고 싶었습니다.
크기를 조정하십시오. 화면 크기가 작아지면 이미지가 더 투명 해지고 물론 일부 경계가 있으므로 보이지 않게됩니다.
이것은 우리가 할 수있는 가장 쉬운 방법이지만 더 많은 방법이 있습니다. 예를 들어, 나는이 데모를하기 위해 많은 뷰포트 관련 효과를 결합하려고 노력했습니다. 데모 크기를 조정하면 페이지가 활력으로 가득 차 있습니다. 물체가 움직이고 배경이 변경되며 텍스트가 부드럽게 랩됩니다.
나는 그것이 정말로 시원하다고 생각하지만, 나는 디자이너가 아니기 때문에 내 두뇌가 생각할 수있는 가장 좋은 방법입니다. 그러나 이것은 이러한 유형 변환 기술을 도입하기에는 너무 많을 수 있으므로 중간 기반으로서 제목 변환에만 집중하여 모든 것이 어떻게 작동하는지 보여줄 것입니다.
설정
그 뒤에있는 아이디어는 를 라디안 (각도를 쓰는 방법)으로 를 사용하여 를 사용하여 원래 값으로 돌아가는 것입니다. 장점은 정수로 보인다는 것입니다. 다음과 같이 구현해야합니다 :
tan()하지만! 브라우저는이 접근 방식을 많이 지원하지 않으므로 모든 브라우저에서 작동하기 위해 더 많은 포장이 필요합니다. 다음은 Magic (또는 넌센스)처럼 보일 수 있으므로 Jane의 기사를 읽는 것이 좋습니다. 그러나 모든 브라우저에서 작동하도록 더 잘 이해하는 것이 좋습니다.
atan2()
너무 걱정하지 마세요. 중요한 것은 우리의 귀중한 변수이며, 이는 뷰포트 크기를 정수로 저장합니다!
너비 : 하나의 숫자가 모두 지배적입니다
이제 우리는 뷰포트를 정수로 가지고 있지만 이것은 첫 번째 단계 일뿐입니다. 이 정수는 그 자체로 그다지 유용하지 않습니다.
이기 때문에 다음에 다른 것으로 변환해야합니다.
다른 속성마다 단위가 다르고 -
우리는 각 속성이 시작 값에서 최종 값으로 변경되기를 원합니다.
-
이미지의 불투명도가 0에서 1으로 변경되거나 객체가 0deg에서 360deg로 회전하거나 요소의
가 0%에서 100%로 변경됩니다. 우리는
가 커지기 때문에 이러한 값 사이를 보간하기를 원하지만 이제는 일반적으로 0에서 1600 사이의 정수 일뿐입니다.
최상의 솔루션은 offset-distance를 0에서 1로 변환하는 것입니다. 따라서 화면이 커지면 원하는 최종 값을 곱할 수 있습니다. 더 나은 이름이 없기 때문에이 값을 "0 ~ 1"라고 부릅니다. 우리가 --int-width가 있다면, 모든 최종 예제가 가능합니다 :
따라서 --int-width, --wideness는 0과 1 사이의 값이며 화면의 너비를 나타냅니다. 0은 화면이 좁아지면 1을 의미하고 화면이 넓을 때 1을 의미합니다. 그러나 우리는 여전히 뷰포트에서 이러한 값의 의미를 설정해야합니다. 예를 들어, 0은 400px이고 1은 1200px가되기를 원하며 뷰포트 변환은 이러한 값간에 실행됩니다. 아래 및 위의 값은 각각 0과 1으로 클램핑됩니다. --wideness
CSS에서는 다음과 같이 쓸 수 있습니다
간단한 변환 외에도 변수를 사용하면 변환이 실행되는 하한 및 상한을 정의 할 수 있습니다. 더 좋은 점은, 우리는 사용자가 완전히 이해할 수 있도록 중간에 전환 영역을 설정할 수 있습니다. 그렇지 않으면 화면이 0px 여야하므로 <code>:root {
--int-width: tan(atan2(100vw, 1px));
}</code>가 0에 도달하고 누가 1에 도달 해야하는지 알고 있습니다.
우리는 -넓음을 얻었습니다. 다음은 무엇입니까? --wideness
먼저, 제목 태그는 문장에서 특정 단어를 선택할 CSS 메소드가 없기 때문에 스팬으로 나뉩니다.
<going> 우리가 스스로를 감싸려고하므로 기본값을 설정하지 않는 것이 매우 중요합니다.
<p>
<work> 변환은 기본 스타일없이 작동해야하지만 너무 평범 해 보입니다. 스타일 시트에 복사하려면 다음과 같이 보입니다. </work></p>
<current> 마지막으로, 우리의 현재 기술은 다음과 같습니다
<pre class="brush:php;toolbar:false"><code>@property --100vw {
syntax: "<length>";
initial-value: 0px;
inherits: false;
}
:root {
--100vw: 100vw;
--int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code></pre>
좋아요, 그게 전부입니다. 이제 새로운 값을 사용하고 뷰포트 변환을 수행 할 차례입니다. 먼저 작은 화면에 맞게 제목이 어떻게 재 배열되어야하는지 결정해야합니다. 초기 데모에서 볼 수 있듯이 첫 번째 <p>는 위와 오른쪽으로 이동하는 반면, 두 번째 <code>--wideness</code>는 반대 방향으로 이동하고 왼쪽으로 움직입니다. 따라서 두 <code>--wideness</code>의 최종 위치는 다음 값으로 변환됩니다.
</p>
<ul> 두 공식은 기본적으로 동일하지만 기호는 계속되기 전에 다릅니다. 새로운 변수 를 도입하여 한 번에 다시 작성할 수 있습니다. 그것은 1 또는 -1이고 변환을 실행하는 방향을 정의합니다.</ul>
<pre class="brush:php;toolbar:false"><code>:root {
--int-width: tan(atan2(100vw, 1px));
}</code></pre>
<is> 다음 단계는 화면이 크기가 크게 변경 될 때 값이 변경되도록 <p>를 공식에 소개하는 것입니다. 그러나 우리는 모든 것을 <code>--wideness</code> 곱을 곱할 수는 없습니다. 왜? 우리가 이것을하면 어떤 일이 일어나는지 보자 : <code>--wideness</code>
</p>
<see> 당신이 볼 수 있듯이, 모든 것이 반전됩니다! 화면이 너무 넓어지면 단어가 줄을 감싸고 화면이 너무 좁아지면 단어가 줄을 감싸게됩니다.
첫 번째 예제와 달리 첫 번째 예에서는 <pre class="brush:php;toolbar:false"><code>@property --100vw {
syntax: "<length>";
initial-value: 0px;
inherits: false;
}
:root {
--100vw: 100vw;
--int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code></pre>가 0에서 1으로 증가하면 변환이 끝나면 <p>가 1에서 0으로 감소함에 따라 변환을 완료하려고합니다. 즉, 화면이 작아지면 속성은 최종 값에 도달해야합니다. 우리는 공식을 뺄셈으로 다시 쓸 수 있기 때문에 큰 문제가되지 않습니다. 뺄셈이 : 로 증가합니다.
</p>
<res> 이제 화면 크기를 조정할 때 모든 것이 올바른 방향으로 움직입니다! <p>
그러나 <will> 그러나 단어가 직선으로 어떻게 움직이는 지, 그리고 크기를 조정할 때 특정 단어가 겹치는 방법을 알 수 있습니다. 특정 화면 크기를 가진 사용자 가이 시점에서 전환 할 수 있기 때문에이를 허용하지 않습니다. 뷰포트 변환은 시원하지만 특정 화면 크기의 경험을 망치는 비용은 그렇지 않습니다. <code>--wideness</code>
<not> 단어는 직선으로 움직이지 않고 중심 단어를 우회하도록 곡선으로 움직여야합니다. 걱정하지 마십시오. 여기서 곡선을 만드는 것이 보이는 것보다 쉽습니다. x 축의 y 축보다 스팬을 두 배나 빨리 움직입니다. 이는 <code>--wideness</code>에 2를 곱하여 수행 할 수 있지만 최종 값을 초과하지 않도록 1로 제한해야합니다. <code>--wideness</code>
</not></will></p>
<beautiful> 아름다운 곡선을보고 중앙 텍스트를 피했습니다.
<the> 이것은 단지 시작에 불과합니다! <pre class="brush:php;toolbar:false"><code>/* 如果 `--wideness` 为 0.5 */
.element {
opacity: var(--wideness); /* 为 0.5 */
translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* 为 180deg */
offset-distance: calc(var(--wideness) * 100%); /* 为 50% */
}</code></pre>
<how> 놀랍게도 뷰포트를 정수로서, 그리고 더 미쳤을 때, 마지막 예제는이 유형 변환 트릭으로 할 수있는 가장 기본적인 변환 중 하나입니다. 초기 설정을 마친 후에는 가능한 더 많은 변환이 있다고 상상할 수 있으며 <p>는 새로운 CSS 기능과 마찬가지로 매우 유용합니다. </p>
<see> 앞으로 "뷰포트 전환"에 대해 더 많이보고 싶습니다. 왜냐하면 그들은 적응 형 웹 사이트보다 웹 사이트가 더 "라이브"를 느끼게하기 때문입니다. <p></p></see></how></the></beautiful></res></see></is></current></going>
위 내용은 TAN을 사용한 CSS의 타입 캐스팅 및 뷰포트 전환 (atan2 ())의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
CSS는 뷰포트 길이를 얻을 수 있었고 시간을 다시 추적 할 수 있습니다 ... (보기 참고) ... 2013! 놀랍게도, 그것은 10 년 전이었습니다. 요즘에는 뷰포트 너비를 얻는 것이