簡單了解jQuery行動web開發的響應式佈局設計_jquery
- WBOY原創
- 2016-05-16 15:27:291302瀏覽
響應式佈局設計是根據使用者裝置的螢幕解析度來回應使用者裝置的一種設計。這意味著，無論使用者是在行動、平板或桌面裝置上瀏覽 Web 頁面，設計都將根據該裝置的螢幕解析度顯示特定的佈局，從而適當地回應裝置。
該框架的文檔實際上結合了 jQuery Mobile 框架和 CSS3 媒體查詢來實現自己的響應式設計。對不同螢幕解析度的反應方式。
沒有自訂樣式，我們的電網將3列的佈局在所有的螢幕寬度：
在我們的自訂樣式，我們希望此網格疊加在狹窄的寬度，然後切換到一個標準的3欄佈局。在很寬的螢幕寬度，我們希望第一列佔用50%的寬度，這樣：
為了實現這樣，我們需要自訂一個新的類別名稱，例如「my-breakpoint」。
這個類別用於範圍的風格在自訂媒體查詢，他們將只適用於當這類添加到網格容器。傳媒查詢包裹我們只想50em應用以下條件的風格。
在你的媒體查詢，使用EM單元代替像素點以確保媒體查詢將字體大小考慮除了螢幕寬度。計算在EMS螢幕寬度，將像素的目標寬度的16，這是body的預設字體大小。
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%和否定浮動屬性，50em螢幕寬度。這些規則適用於每一個網格類型由堆疊選擇器網格的所有類別ui-block-a到ui-block-e的風格。
那是使網格的響應和添加額外的樣式規則，每個斷點改變起來更容易。我們鼓勵您創建多個客製化的斷點，你需要根據你獨特的內容和佈局的需要。
增加一個寬螢幕斷點調整比率
基於上面的例子，我們可以添加一個額外的斷點將寬度以使第一列的寬度為50%，其他兩個25%以上75em（1200像素）由額外的最小寬度媒體查詢來調整寬度在自訂風格就這樣：
@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-responsive
使用此預設斷點，新增 ui-responsive 類別到網格容器，將堆疊呈現以下560px（35em）。如果這個斷點的工作不適合你的內容，我們鼓勵你寫一個自訂的斷點如上所述。
<div class=" ui-grid-b ui-responsive ">
這些都是標準的網格是由 ui-responsive（界面反應，自訂類，如上例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>
