하나의 CSS 속성으로 반응형 웹 사이트를 만듭니다. 어떻게 되는지 봅시다. ?

예를 들어 CSS 속성을 적용하지 않고 이 템플릿을 고려하십시오 .?

https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9

clamp() CSS 함수를 사용하여 하나의 속성만 있는 반응형 웹 사이트를 만들 수 있습니다.

이제 마법의 CSS를 추가하십시오.

clamp(minimum, preferred, maximum);

여기 있습니다! 너 끝났어 ✌

설명 

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

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

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

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

이 예에서 h1 글꼴 크기 값은 뷰포트 너비의 5 %입니다. 그러나 해당 값이 16px보다 크고 34px보다 작은 경우에만.

예를 들어 뷰포트 너비가 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);
}

그리고 말 그대로 길이, 빈도, 각도, 시간, 백분율, 숫자 또는 정수를 허용하는 다른 모든 속성