如果只定位一种尺寸,应该选择哪种屏幕尺寸?
Which screen size should be if only one size is going to be targeted?
这里是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)?如果屏幕上显示的页面大小与目标大小不同,会发生什么情况?
我们的应用主要在台式机上使用,偶尔在智能手机或平板电脑上使用。
响应式应用的最佳做法是 "code for small" 并在必要时针对更大的屏幕进行微调,因此答案可能应该是 sm。
"What happen if the page is displayed on screen whose size is different from what is targeted? "
框架应相应调整。您是说您的应用基本上是偶尔在 phone 或平板电脑上使用的桌面,但是当您 运行 遇到屏幕空间问题时,将小内容归档到大屏幕上会容易得多屏幕,将大内容塞进小屏幕。只是我的 2 美分。
如果您使用 col-sm-*
那么它自动适用于 col-md-*
和 col-lg-*
所以我建议使用 col-sm-*
如果该网站更多地用于平板电脑和台式机而不是来自非常小的移动设备。
这里是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)?如果屏幕上显示的页面大小与目标大小不同,会发生什么情况?
我们的应用主要在台式机上使用,偶尔在智能手机或平板电脑上使用。
响应式应用的最佳做法是 "code for small" 并在必要时针对更大的屏幕进行微调,因此答案可能应该是 sm。
"What happen if the page is displayed on screen whose size is different from what is targeted? "
框架应相应调整。您是说您的应用基本上是偶尔在 phone 或平板电脑上使用的桌面,但是当您 运行 遇到屏幕空间问题时,将小内容归档到大屏幕上会容易得多屏幕,将大内容塞进小屏幕。只是我的 2 美分。
如果您使用 col-sm-*
那么它自动适用于 col-md-*
和 col-lg-*
所以我建议使用 col-sm-*
如果该网站更多地用于平板电脑和台式机而不是来自非常小的移动设备。