2013-10-16 53 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>