Question

我正在使用jQuery mobile开发应用程序，我希望有2个设计/布局，1个用于移动设备，另一个用于平板电脑。那可能吗？如果是这样的话？这是一些代码吗？

谢谢！诺亚

Answer 1

扩展上面的评论，你只需设置带有媒体查询的CSS文件，根据浏览器窗口大小更改布局。媒体查询如下所示：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    **PUT YOUR MOBILE STYLES HERE**
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    **PUT YOUR TABLET STYLES HERE**
}

您可以更改最小/最大宽度以满足您的需求。

我们假设您有一个类donate的按钮。在移动设备上，您希望按钮跨越包含div的宽度的100％，但在平板电脑上，您希望它的设置宽度为300px。这是您设置媒体查询的方式：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .donate {
       width:100%;
    }
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .donate {
       width:300px;
    }
}

您可以为手机设置1个布局，使用jQuery mobile设置平板电脑吗？

1 个答案: