2013-10-16 51 views
1

首先,對不起,因爲我剛剛開始使用jquery mobile和響應式設計。jquery手機響應式圖片模板

我想用jquery mobile創建一個模板來創建一個移動應用程序。

問題在於移動設備和平板電腦的尺寸。

我的測試看起來不像我想要的。我想要在圖像中構建類似節目的內容。

http://aprendeinformaticaconmigo.com/images/resposive_app_template.png

誰能告訴我如何針對不同的手機和平板電腦的尺寸做到這一點?

非常感謝!

+0

使用網格,而不是表。檢查jQuery的移動網格系統http://view.jquerymobile.com/1.3.2/dist/demos/widgets/grids/或使用任何第三方插件http://jeromeetienne.github.io/jquery-mobile-960/ – Omar

回答

0

是否這樣? http://jsfiddle.net/rnErL/

很少的代碼爲它

CSS:

.box { 
    max-width:500px; 
    width:100%; 
    min-height:200px; 
    background-color:green; 
    margin:5px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.bottom-left, .bottom-right { 
    width:50px; 
    height:50px; 
    position:absolute; 
    background-color:green; 
} 

.bottom-left { 
    bottom:5px; 
} 

.bottom-right { 
    bottom:5px; 
    right:5px; 
} 

HTML:

<div class="box"></div> 
<div class="box"></div> 
<div class="bottom-left"></div> 
<div class="bottom-right"></div>