Question

这是定义网格的bootstrap 3代码：

<div class="container">

    <div class="row">

        <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
    </div>

</div>

上面的网格针对中小屏幕。如果要定位一个且只有一个屏幕尺寸，它会是什么（col-xs，sm或md）？如果页面显示在屏幕上，其大小与目标不同，会发生什么？

我们的应用程序主要用于桌面设备，偶尔用于智能手机或平板电脑。

Answer 1

响应式应用的最佳做法是“代码小”，如果需要更大的屏幕进行微调，所以答案可能应该是sm。

“如果页面显示在尺寸与目标尺寸不同的屏幕上会发生什么？”

框架应相应调整。你说你的应用程序基本上是一个偶尔用在手机或平板电脑上的桌面，但是当你遇到屏幕不动产的问题时，在大屏幕上提交小内容以便将大量内容塞进一个小屏幕。只需2美分。

Answer 2

如果您使用col-sm-*，那么它会自动适用于col-md-*和col-lg-*因此我建议使用col-sm-*，如果该网站更多地来自平板电脑和台式机，而不是来自非常小的移动设备。

如果只针对一种尺寸，应该使用哪种屏幕尺寸？

2 个答案: