jQuery 모바일 웹 개발을 위한 반응형 레이아웃 디자인에 대한 간략한 소개_jquery
- WBOY원래의
- 2016-05-16 15:27:291301검색
반응형 레이아웃 디자인은 사용자 기기의 화면 해상도에 따라 사용자 기기에 반응하는 디자인입니다. 즉, 사용자가 모바일, 태블릿, 데스크톱 기기에서 웹페이지를 탐색하든 상관없이 디자인은 기기의 화면 해상도에 따라 특정 레이아웃을 표시하여 기기에 적절하게 반응합니다.
프레임워크의 문서는 실제로 jQuery Mobile 프레임워크와 CSS3 미디어 쿼리의 조합을 사용하여 자체 반응형 디자인을 구현합니다. 다양한 화면 해상도에 어떻게 반응합니까?
사용자 정의 스타일이 없으면 그리드는 모든 화면 너비에 걸쳐 3열 레이아웃이 됩니다.
사용자 정의 스타일에서는 이 그리드가 좁은 너비를 오버레이한 다음 표준 3열 레이아웃으로 전환하기를 원합니다. 매우 넓은 화면 너비에서는 다음과 같이 첫 번째 열이 너비의 50%를 차지하려고 합니다.
이를 달성하려면 "my-breakpoint"와 같은 새 클래스 이름을 사용자 정의해야 합니다.
이 클래스는 사용자 정의 미디어 쿼리의 범위가 지정된 스타일에 사용되며 이 클래스가 그리드 컨테이너에 추가될 때만 적용됩니다. 미디어 쿼리 패키지의 경우 다음 조건을 적용하는 50em 스타일만 필요합니다.
미디어 쿼리에서 픽셀 대신 EM 단위를 사용하여 미디어 쿼리가 화면 너비 외에 글꼴 크기도 고려하도록 합니다. EMS 화면 너비를 계산하려면 본문의 기본 글꼴 크기인 대상 너비에 16픽셀을 더합니다.
HTML5 부분:
<div class="ui-grid-b my-breakpoint"> <div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div> <div class="ui-block-c">Block C</div> </div><!-- /grid-b -->
CSS3 부분:
@media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
이 미디어 쿼리에서는 너비를 100%로 설정하고 float 속성을 50em 화면 너비로 무효화합니다. 이러한 규칙은 ui-block-a 스타일부터 ui-block-e 스타일까지 모든 클래스의 선택기 그리드를 쌓아서 모든 그리드 유형에 적용됩니다.
이는 그리드를 반응형으로 만들고 추가 스타일 규칙을 추가하여 각 중단점 변경을 더 쉽게 만드는 것입니다. 고유한 콘텐츠 및 레이아웃 요구 사항에 따라 필요한 만큼 사용자 정의 중단점을 만드는 것이 좋습니다.
와이드스크린 중단점을 추가하여 비율 조정
위의 예를 기반으로 첫 번째 열의 너비가 50%이고 나머지 두 열이 75em(1200픽셀)보다 25% 높도록 너비를 설정하는 추가 중단점을 추가할 수 있습니다. 너비 맞춤 스타일에서는 다음과 같습니다:
@media all and (min-width: 75em) {
.my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
.my-breakpoint.ui-grid-b .ui-block-b,
.my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
.my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
}
}
참고: 플랫폼 전반에 걸쳐 반올림 문제를 해결하려면 약간 더 좁은 너비 설정이 필요합니다.
반응형 사용자 정의 중단점 적용
이 기본 중단점을 사용하여 그리드 컨테이너에 UI 반응 클래스를 추가하면 스택이 560px(35em) 미만으로 렌더링됩니다. 이 중단점이 콘텐츠에 작동하지 않는 경우 위에 설명된 대로 사용자 정의 중단점을 작성하는 것이 좋습니다.
<div class=" ui-grid-b ui-responsive ">
UI-Reactive로 만든 반응형 클래스 그리드 컨테이너인 표준 그리드입니다(위 예에서는 인터페이스 응답, 사용자 정의 클래스, my-breakpoint).
예:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-grid demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- The script below can be omitted -->
<script src="/resources/turnOffPushState.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
@media all and (min-width: 45em) {
.my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
.my-breakpoint.ui-grid-b .ui-block-b,
.my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Responsive Grid Example</h1>
</div>
<div data-role="content">
<div class="ui-grid-b my-breakpoint">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div>
</div>
</body>
</html>
