CSS 속성 하나만 사용하여 반응형 웹사이트를 만드는 방법은 무엇입니까?

CSS 속성을 사용하여 반응형 웹사이트를 만드는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. [관련 권장사항: CSS 동영상 튜토리얼]

이 템플릿을 예로 들면 CSS 속성이 적용되지 않습니다.

clamp() CSS 함수를 사용하면 속성이 하나만 있는 반응형 웹사이트를 만들 수 있습니다. clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。

现在添加魔术CSS

clamp(minimum, preferred, maximum);

在这里！你已经完成了

说明

clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。

使用方法如下：

1. minimum 最小值：例如 16px
2. flexible 弹性值：例如 5vw
3. maximum 最大值：例如 34px

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

在此示例中，仅当该值大于 16px 且小于 34px 时,h1 字体大小值将为视口宽度的 5％。

例如，如果你的视口宽度是 300px，你的 5vw 值将等于 15px，但是，你将该字体大小值限制为最小 16px，因此这就是将要发生的情况。

另一方面，如果你的视口宽度为 1400px，则 5vw 将高达 70px！但幸运的是，你将该最大值限制为 34px

이제 여기에 마법의 CSS

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}

를 추가하세요! 완료되었습니다

설명

clamp() 는 "클램핑"하거나 유연한 값을 최소 및 최대 범위 사이로 제한하여 작동합니다.

사용 방법은 다음과 같습니다:

1. 최소 최소값: 예: 16px
2. 유연한 탄성 값: 예: 5vw
3. 최대 최대값: 예: 34px

rrreee

이 예에서는 값이 16px보다 큰 경우에만 해당됩니다. > 34px 미만인 경우 h1 글꼴 크기 값은 표시 영역 너비의 5%입니다.

예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같지만 해당 글꼴 크기를 변경합니다. value 제한은 최소 16px이므로 그렇게 됩니다.

반면에 뷰포트 너비가 1400px인 경우 5vw는 최대 70px입니다! 하지만 다행스럽게도 최대값을 34px로 제한하므로 이를 초과하지 않습니다.

온라인 데모: https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

이 코드를 이 템플릿에 추가할 수 있습니다...🎜rrreee🎜문자 그대로 다른 길이, 빈도, 각도, 시간을 허용합니다. , 백분율, 숫자 또는 정수 속성. 🎜🎜🎜🎜🎜🎜원문: https://dev.to/dip15739🎜저자: Dip Vachhani🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 CSS 속성 하나만 사용하여 반응형 웹사이트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!