簡要了解jQuery移動web開發的響應式布局設計

2019-11-20 11:04:43

字體：大中小

來源：轉載

供稿：網友

響應式布局設計是根據用戶設備的屏幕分辨率來響應用戶設備的一種設計。這意味著，無論用戶是在移動、平板還是桌面設備上瀏覽 Web 頁面，設計都將根據該設備的屏幕分辨率顯示特定的布局，從而適當地響應設備。

該框架的文檔實際上結合使用了 jQuery Mobile 框架和 CSS3 媒體查詢來實現自己的響應式設計。對不同屏幕分辨率的反應方式。

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

2015124141324766.jpg (830×56)

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

2015124141417389.jpg (827×56)

為了實現這樣，我們需要自定義一個新的類名稱，比如“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" > <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)