您可以使用 jQuery mobile 为手机提供一种布局，而为平板电脑提供另一种布局吗？

Question

我正在使用 jQuery mobile 开发一个应用程序，我想要 2 种设计/布局，一种用于移动设备，另一种用于平板电脑。那可能吗？如果是这样怎么办？是代码吗？

谢谢！ 诺亚

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;
    }
}