标签: responsive-design

我很难理解字体缩放.

我目前有这个网站的身体font-size100%.但是100%的是什么？这似乎计算在16px.

我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.

如何使我的网站上的文本与其容器相关？我尝试过使用,em但这也没有扩展.

我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px的font-size相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)

我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

是什么之间的差异col-lg-*,col-md-*并col-sm-*在Twitter的引导？

是否可以设置与宽度相同的高度(比例1:1)？

例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑.

首先,你可以有一个普通的固定container,或者container-fluid.

然后,任何一个都可以包括普通row行或流体行row-fluid.也就是说,你可以拥有一个带有流体排的固定容器,或一个带有固定排的容器流体......

然后,您可以在其中包含"响应式"媒体查询.

我对这些事情如何相互作用感到困惑.但让我们从一个明显的例子开始.

在示例页面本身,有一个固定网格和流体网格的例子

但是,在我的浏览器中,在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用可选的响应式媒体查询？在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,则网格元素不会逐渐变窄 - 一旦达到某个(响应性)边界宽度,它们会捕捉到更小的尺寸,并再次在更大的边界宽度处.但是普通的"固定"示例和"流动"示例在这里表现完全相同 - 那么差异究竟是什么呢？

我使用Zurb Foundation 3网格创建了一个站点.每个页面都有一个大的h1.

CSS

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

HTML

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

当我将浏览器的大小调整为移动大小时,大字体不会调整并导致浏览器包含水平滚动以容纳大文本.

我注意到在Zurb Foundation 3 Typography 示例页面上,标题在压缩和扩展时适应浏览器.

我错过了一些非常明显的东西吗 我该如何实现这一目标？

每个响应式网站开发教程都建议使用display:noneCSS属性隐藏在移动浏览器上加载的内容,以便网站加载速度更快.这是真的吗？难道display:none不加载图像或它仍然加载在手机浏览器的内容？有没有办法阻止在移动浏览器上加载不必要的内容？

通过引导程序看起来它们似乎支持折叠较小屏幕的菜单栏项目.页面上的其他项目是否有类似内容？

例如,我有一个导航丸正好浮动.在小屏幕上,这会导致问题.我喜欢至少把它放到类似的点击显示更多下拉菜单中.

这在现有的Bootstrap框架中是否可行？

我想要一个按钮占据列的整个宽度,但有困难......

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

如何使按钮与列一样宽？

假设我有一个直方图脚本,可以构建一个960 500 svg图形.如何调整响应,以便调整图形宽度和高度是动态的？

<script> 

var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
    (data);

var width = 960,
    height = 500;

var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]); …