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

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

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

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

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

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