2

所以，我只是进入响应式设计和与之相关的任何事情。大多数情况下，我正在研究 Twitter Bootstrap，因为它是用 LESS 制作的，而且我一直使用 LESS 作为 CSS 框架。

我发现他们正在使用的媒体查询宽度：

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

但是我在测试行为时有一个问题，979px和之间会发生什么1200px？因为如果我不添加任何东西，另一个媒体查询，我的所有元素都会在调整窗口大小或这两个值之间的宽度时失去样式。

我应该添加其他内容还是缺少某些内容？

4

3 回答 3

3

我来晚了，但我也想修复引导程序响应网格的那部分。

如果有人感兴趣，我添加了一个新的 LESS 文件和一些变量。

variables.less（在网格部分的好地方添加它）

// basic grid
// 980px-1199px
@gridColumnWidth980:      56px; // Feel free to modify this value !
@gridGutterWidth980:      24px; // Feel free to modify this value !
@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// Fluid grid
// 980px-1199px
@fluidGridColumnWidth980:      percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980:      percentage(@gridGutterWidth980/@gridRowWidth980);

新文件：responsive-980px-1199px.less

// Responsive: Small desktops
// --------------------------------------------------


@media (min-width: 980px) and (max-width: 1199px) {

  // Fixed grid
  #grid > .core(@gridColumnWidth980, @gridGutterWidth980);

  // Fluid grid
  #grid > .fluid(@fluidGridColumnWidth980, @fluidGridGutterWidth980);

  // Input grid
  #grid > .input(@gridColumnWidth980, @gridGutterWidth980);

  // No need to reset .thumbnails here since it's the same @gridGutterWidth

}

然后只需将新文件导入到 responsive.less 文件！

// Small desktops
@import "responsive-980px-1199px";

网格不应再“宽”在 980px 和 1199px 之间。

于 2013-03-26T10:16:43.003 回答
2

你的整个页面会分散并且看起来很奇怪你必须为此配置你的css

于 2012-05-04T17:12:35.253 回答
1

最简单的解决方案：将@media (min-width: 1200px)从 1200px 更改为 980px。

只要min-width: 1200px规则适用于您网站上 980px 的窗口，此方法就可以正常工作。它适用于我的。只要您不介意在每次更新 Bootstrap 时进行更改，您就可以将其保存在 .less 文件中或更改 Bootstrap css 文件。希望他们能在未来的更新中弥补这一差距。

于 2013-06-12T16:06:21.777 回答