JS는 화면 크기 캐러셀 그래프에 적응합니다

작은 쓰레기 같은 놈들 · 게시됨 2020. 9. 25. 오전 10:15:17

요구 사항: 모바일 단말기에 접속할 때 캐러셀 차트는 1개의 콘텐츠만 표시하고, 태블릿 단말기에서는 2개의 콘텐츠를 표시하며, PC 쪽에서는 4개의 콘텐츠를 표시합니다.

먼저, 렌더링 아래:

부트스트랩에는 그리드 시스템이 있어서 기기 크기에 따라 매우 잘 적응할 수 있다는 것을 알고 있습니다. 원리는 실제로 CSS의 미디어에 있지만, 제 캐러셀 기능은 js 파라미터에 따라 설정된 Swiper 플러그인을 사용합니다.

스와이퍼는 모바일 기기(휴대폰, 태블릿)를 위한 순수 자바스크립트로 만든 스와이프 효과 플러그인입니다.

부트스트랩 그리드 시스템:

상세 정보:하이퍼링크 로그인이 보입니다.

순수 CSS를 사용한다면, 코드는 다음과 같습니다(저에게는 해당되지 않습니다):

js는 Window matchMedia() 메서드로 판정되며, 매개변수가 조정되고 적응됩니다. 코드는 다음과 같습니다:

(끝)

[JavaScript] JS는 화면 크기 캐러셀 그래프에 적응합니다