快捷導(dǎo)航

簡要了解jQuery移動web開發(fā)的響應(yīng)式布局設(shè)計

更新時間：2015年12月04日 14:19:32 投稿：goldensun

這篇文章主要介紹了jQuery移動web開發(fā)的響應(yīng)式布局設(shè)計,jQuery是JavaScript世界中最具人氣的模塊或者說類庫,需要的朋友可以參考下

響應(yīng)式布局設(shè)計是根據(jù)用戶設(shè)備的屏幕分辨率來響應(yīng)用戶設(shè)備的一種設(shè)計。這意味著，無論用戶是在移動、平板還是桌面設(shè)備上瀏覽 Web 頁面，設(shè)計都將根據(jù)該設(shè)備的屏幕分辨率顯示特定的布局，從而適當(dāng)?shù)仨憫?yīng)設(shè)備。

該框架的文檔實際上結(jié)合使用了 jQuery Mobile 框架和 CSS3 媒體查詢來實現(xiàn)自己的響應(yīng)式設(shè)計。對不同屏幕分辨率的反應(yīng)方式。

沒有自定義樣式，我們的電網(wǎng)將3列的布局在所有的屏幕寬度：

2015124141324766.jpg (830×56)

在我們的自定義樣式，我們希望此網(wǎng)格疊加在狹窄的寬度，然后切換到一個標(biāo)準(zhǔn)的3欄布局。在很寬的屏幕寬度，我們希望第一列占用50%的寬度，這樣：

2015124141417389.jpg (827×56)

為了實現(xiàn)這樣，我們需要自定義一個新的類名稱，比如“my-breakpoint”。
這個類用于范圍的風(fēng)格在自定義媒體查詢，他們將只適用于當(dāng)這類添加到網(wǎng)格容器。傳媒查詢包裹我們只想50em應(yīng)用以下條件的風(fēng)格。
在你的媒體查詢，使用EM單元代替像素點以確保媒體查詢將字體大小考慮除了屏幕寬度。計算在EMS屏幕寬度，將像素的目標(biāo)寬度的16，這是body的默認(rèn)字體大小。

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; 
 }
}

在這個媒體查詢，我們設(shè)置寬為100%和否定浮動屬性，50em屏幕寬度。這些規(guī)則適用于每一個網(wǎng)格類型由堆放選擇器網(wǎng)格的所有類ui-block-a到ui-block-e的風(fēng)格。
那是使網(wǎng)格的響應(yīng)和添加額外的樣式規(guī)則，每個斷點改變起來更容易。我們鼓勵您創(chuàng)建多個定制的斷點，你需要根據(jù)你獨特的內(nèi)容和布局的需要。

添加一個寬屏斷點調(diào)整比率

基于上面的例子，我們可以添加一個額外的斷點將寬度以使第一列的寬度為50%，其他兩個25%以上75em（1200像素）由額外的最小寬度媒體查詢來調(diào)整寬度在自定義風(fēng)格就這樣：

@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; }
 }
}

注意：稍窄的寬度設(shè)置為工作在四舍五入問題的跨平臺。

應(yīng)用自定義斷點 ui-responsive

使用此預(yù)設(shè)斷點，添加 ui-responsive 類到網(wǎng)格容器，將堆疊呈現(xiàn)以下560px（35em）。如果這個斷點的工作不適合你的內(nèi)容，我們鼓勵你寫一個自定義的斷點如上所述。

<div class=" ui-grid-b ui-responsive ">

這些都是標(biāo)準(zhǔn)的網(wǎng)格是由 ui-responsive（界面反應(yīng)，自定義類，如上例子my-breakpoint）的作出響應(yīng)類網(wǎng)格容器

示例：

<!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" >
 <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>

2015124141513710.jpg (832×333)