Question

尝试创建支持移动屏幕的响应式网格。当使用jQuery mobile ui-responsive网格时，该列包装并且行为类似行（一个在一个下面），即使第一行有空间容纳第二列。如果我在平板电脑尺寸屏幕上测试相同，一切正常。哪里我错了或这是它的表现？

我使用的代码是

<div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <a href="#" id="link_frgt_pswd" data-inline="true" >Forgot Password ?</a>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-submit" data-role="button" data-inline="true">Login</a>
                    </div>

                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Member </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="link_unlock_acc" data-inline="true" >Unlock Account</a>
                    </div>
                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Provider </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-provider" data-role="button" data-inline="true">Register</a>
                    </div>
                </div>

我甚至尝试使用css .ui-grid-a .ui-block-a { width: 30% } .ui-grid-a .ui-block-b { width: 30% }减少列的宽度。它会减小宽度，但ui-block-b仍然在下一行。

Answer 1

jQM中的ui-responsive类为最大宽度为560px添加了CSS媒体查询。因此，只要屏幕小于560px，就会堆叠列。如果您想要自己的自定义断点，而不是ui-responsive，请创建自己的类名并设置所需的断点。

例如，如果您希望仅在屏幕宽度低于300px时发生堆叠：

<div class="ui-grid-a my-breakpoint">...</div>

@media all and (max-width: 300px) {
    .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;
    }
}

<强> DEMO

您还可以从jQM网站查看此演示：

http://demos.jquerymobile.com/1.4.5/grids-custom-responsive/

ui-responsive网格将列包装成jQuery mobile行

1 个答案: