Question

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

这将是我应该遵循的最佳分辨率，以创建响应式设计，我可以注意到最多的是每天都有不同分辨率的设备数量。

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

且小于1024且大于1920px。

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

我想知道这是否是行业标准，还是在开发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) { ... }

您的设计需要更大的网格，至少1920px及以上。 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文件，添加一个额外的网格（）并重新编译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- * grid列类来使用新的Super Large网格。

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

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

1 个答案: