CSS 속성을 사용하여 반응형 웹사이트를 만드는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. [관련 권장사항: CSS 동영상 튜토리얼]
이 템플릿을 예로 들면 CSS 속성이 적용되지 않습니다.
clamp()
CSS 함수를 사용하면 속성이 하나만 있는 반응형 웹사이트를 만들 수 있습니다. clamp()
CSS函数,我们可以创建仅具有一个属性的响应式网站。
现在添加魔术CSS
clamp(minimum, preferred, maximum);
在这里!你已经完成了
clamp()
的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间。
使用方法如下:
16px
5vw
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()
는 "클램핑"하거나 유연한 값을 최소 및 최대 범위 사이로 제한하여 작동합니다.
사용 방법은 다음과 같습니다:
16px
5vw
34px
이 예에서는 값이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!