簡要了解jQuery移動(dòng)web開發(fā)的響應(yīng)式布局設(shè)計(jì)
響應(yīng)式布局設(shè)計(jì)是根據(jù)用戶設(shè)備的屏幕分辨率來響應(yīng)用戶設(shè)備的一種設(shè)計(jì)。這意味著,無論用戶是在移動(dòng)、平板還是桌面設(shè)備上瀏覽 Web 頁面,設(shè)計(jì)都將根據(jù)該設(shè)備的屏幕分辨率顯示特定的布局,從而適當(dāng)?shù)仨憫?yīng)設(shè)備。
該框架的文檔實(shí)際上結(jié)合使用了 jQuery Mobile 框架和 CSS3 媒體查詢來實(shí)現(xiàn)自己的響應(yīng)式設(shè)計(jì)。對不同屏幕分辨率的反應(yīng)方式。
沒有自定義樣式,我們的電網(wǎng)將3列的布局在所有的屏幕寬度:
在我們的自定義樣式,我們希望此網(wǎng)格疊加在狹窄的寬度,然后切換到一個(gè)標(biāo)準(zhǔn)的3欄布局。在很寬的屏幕寬度,我們希望第一列占用50%的寬度,這樣:
為了實(shí)現(xiàn)這樣,我們需要自定義一個(gè)新的類名稱,比如“my-breakpoint”。
這個(gè)類用于范圍的風(fēng)格在自定義媒體查詢,他們將只適用于當(dāng)這類添加到網(wǎng)格容器。傳媒查詢包裹我們只想50em應(yīng)用以下條件的風(fēng)格。
在你的媒體查詢,使用EM單元代替像素點(diǎn)以確保媒體查詢將字體大小考慮除了屏幕寬度。計(jì)算在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; } }
在這個(gè)媒體查詢,我們設(shè)置寬為100%和否定浮動(dòng)屬性,50em屏幕寬度。這些規(guī)則適用于每一個(gè)網(wǎng)格類型由堆放選擇器網(wǎng)格的所有類ui-block-a到ui-block-e的風(fēng)格。
那是使網(wǎng)格的響應(yīng)和添加額外的樣式規(guī)則,每個(gè)斷點(diǎn)改變起來更容易。我們鼓勵(lì)您創(chuàng)建多個(gè)定制的斷點(diǎn),你需要根據(jù)你獨(dú)特的內(nèi)容和布局的需要。
添加一個(gè)寬屏斷點(diǎn)調(diào)整比率
基于上面的例子,我們可以添加一個(gè)額外的斷點(diǎn)將寬度以使第一列的寬度為50%,其他兩個(gè)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è)置為工作在四舍五入問題的跨平臺(tái)。
應(yīng)用自定義斷點(diǎn) ui-responsive
使用此預(yù)設(shè)斷點(diǎn),添加 ui-responsive 類到網(wǎng)格容器,將堆疊呈現(xiàn)以下560px(35em)。如果這個(gè)斷點(diǎn)的工作不適合你的內(nèi)容,我們鼓勵(lì)你寫一個(gè)自定義的斷點(diǎn)如上所述。
<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>
相關(guān)文章
jQuery實(shí)現(xiàn)右下角可縮放大小的層完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)右下角可縮放大小的層,以完整實(shí)例形式分析了jQuery頁面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06jquery簡單倒計(jì)時(shí)實(shí)現(xiàn)方法
這篇文章主要介紹了jquery簡單倒計(jì)時(shí)實(shí)現(xiàn)方法,涉及jQuery定時(shí)函數(shù)操作及日期與實(shí)現(xiàn)的運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法,分別介紹了原生javascript與jQuery插件實(shí)現(xiàn)圖片的預(yù)加載及延遲加載的方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jquery.cookie實(shí)現(xiàn)的客戶端購物車操作實(shí)例
這篇文章主要介紹了jquery.cookie實(shí)現(xiàn)的客戶端購物車操作,結(jié)合實(shí)例形式分析了jQuery基于cookie存儲(chǔ)及操作數(shù)據(jù)實(shí)現(xiàn)購物車功能的技巧,需要的朋友可以參考下2015-12-12基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果
這篇文章主要介紹了基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果,需要的朋友可以參考下2017-06-06jquery使用each方法遍歷json格式數(shù)據(jù)實(shí)例
這篇文章主要介紹了jquery使用each方法遍歷json格式數(shù)據(jù),實(shí)例分析了jQuery中each方法的使用技巧,需要的朋友可以參考下2015-05-05