响应式设计应该响应哪个组件

Question

我使用 Twitter 引导框架来设计我的 Web 应用程序。当我考虑响应式设计时，我是否应该考虑响应式设计我的布局，或者我还应该考虑文本框、标签、按钮和其他组件，以便随着屏幕变大而响应。

我应该遵循哪些最佳分辨率来创建响应式设计，我可以注意到大多数设备每天都在以不同的分辨率不断发展。

目前，我开发了我的应用程序，该应用程序在 1024 -1439、1440-1659、1660 - 1920 之间的所有分辨率下都能响应布局、文本框、按钮、标签和标题。

小于 1024 且大于 1920 像素。

我应该如何在响应式设计中使用缩放。

我想知道这是否是行业标准，或者在开发 Web 应用程序之前我还有什么需要注意的。

Answer 1

Twitter 的 Bootstrap 默认是响应式的。这包括所有组件和网格。

要找到你的答案，请先学习http://getbootstrap.com/css/#grid Twitter 的 Bootstrap 定义了四个网格。最大的网格有一个最大容器 大小为 1170 像素。

大号 (col-lg-*) 受以下约束：

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

您的设计需要更大的网格，至少 1920 像素及以上。 1920x1080 似乎是工业标准：http://en.wikipedia.org/wiki/1080p

根据 Bootstrap 的网格定义，我希望您应该使用更大的网格来扩展网格。也可以看看： 另见Bootstrap 3 - 940px width grid?， Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

要添加额外的网格，请从 https://github.com/twbs/bootstrap/tree/master/less 下载 Bootstrap 的 LESS 文件，添加额外的 grid() 并重新编译您的 CSS。

在 grid.less 中替换：

//or define in variables.less 
@screen-superlg: 1920px;
@screen-superlg-min: @screen-lg;

// Large screen / wide desktop
//or define in variables.less 
@container-superlarge-desktop:      ((1860px + @grid-gutter-width));
@container-superlg:                 @container-superlarge-desktop;

.container {
  .container-fixed();

  @media (min-width: @screen-sm) {
    width: @container-sm;
  }
  @media (min-width: @screen-md) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
  /* Larger devices (HD TV, 1920px and up) */

  @media (min-width: @screen-superlg-min) {
    width: @container-superlg;
  }
}

并添加：

//  Super Large grid
//
// Columns, offsets, pushes, and pulls for the hd tv device range.

@screen-lg-max:              (@screen-superlg-min - 1); // define in variables.less

@media (min-width: @screen-superlg-min) {
  .make-grid-columns-float(superlg);
  .make-grid(@grid-columns, superlg, width);
  .make-grid(@grid-columns, superlg, pull);
  .make-grid(@grid-columns, superlg, push);
  .make-grid(@grid-columns, superlg, offset);
}

完成此操作后，您可以通过使用 col-superlg-* 网格列类来使用新的超大网格。

在此之后，您还应该扩展在 less/responsive-utilities.less 中定义的响应式实用程序 (http://getbootstrap.com/css/#responsive-utilities)。