Scalable.js를 사용하여 자동 크기 조정 요소 만들기

필요한 경우 컨테이너를 자동으로 채우는 유연한 요소 만들기 Scalable을 강력히 추천합니다. 이 무료 오픈 소스 JS 스크립트는 많은 스트레스없이 유연한 디자인을 만들 때 적합합니다..

Scalable.js 라이브러리의 모든 내용은 가단 처리되므로 모든 컨테이너의 스타일, 크기, 위치 및 내부 내용을 변경할 수 있습니다. 페이지의 상단 또는 하단에 정렬 된 요소가 필요합니까? 확장성에 대한 옵션이 있습니다..

이 작동 방식에 대해 자세히 알아 보려면 GitHub 저장소를 살펴보십시오..

이 스크립트는 가장 기본적인 형식으로 대상 페이지 요소와 함께 디스플레이 사용자 지정을위한 몇 가지 옵션을 사용합니다. 다음은 GitHub에서 직접 가져온 몇 가지 샘플 코드입니다.

var scalable = new 확장 가능 (containerEl, options);

당연히 첫 번째 매개 변수는 타겟팅하는 컨테이너 요소 (이상적으로는

또는 비슷한).

options 매개 변수는 key => value 쌍의 배열을 가져야합니다. 이러한 옵션에는 다음이 포함됩니다. 컨테이너 높이 값, 최소 너비 및 최대 너비, 최소 및 최대 배율 (즉, 내부 요소로 확장 할 수있는 정도).

주요 프로젝트 페이지에서 사용 가능한 데모를 확인하십시오. 컨테이너의 모서리를 드래그하여 내부의 유연한 항목의 크기를 자동으로 조정할 수 있습니다. 당신이 찾을 수있는 지역 아래에 있기 때문에 이것은 아주 멋지다. 사용 가능한 코드 페이지에서 직접 가져온.

순수한 CSS만으로 유연한 요소를 처리 할 수있는 방법이 있습니다. 그러나 이러한 메서드는 날짜가 느껴질 수 있으며 JavaScript와 같이 많은 제어 기능을 제공하지 않습니다..

이 것을 시험해보고 싶다면 GitHub에서 사본을 가져 와서 생각해보십시오..

Scalable은 아직 개발 중이지만 필요에 맞게 편집하는 것은 쉬운 스크립트입니다.