0

我看到了常规网格的这些设置（默认为 1000px 和 30px 排水沟），但在使用小网格时这些设置显然不同。这些是如何确定的？

我确实注意到这些值是使用 Zurb 的 emCalc 函数设置的，该函数将像素转换为 em 单位。这是否意味着小网格没有设置，只是缩小了这些设置？

4

1 回答 1

0

只是一些指示开始......

  • 1000px 是width但max-width设置为 100% 这意味着.row当窗口小于 1000px 时容器将被挤压（max-width优先）
  • 天沟没变
  • Em 单元不随浏览器窗口大小而缩放，这是 Zurb Foundation 所打开的。
  • 因为大多数浏览器使用大小为 16px 的字体，所以emCalc所做的就是将 px 值除以 16 以获得 em 值（或将 em 值乘以 16 以获得 px 值）——这种转换基本上是在 Sass 文件中硬编码的，而不是从浏览器中嗅出的或任何像这样的超级聪明的东西。

所以从我能收集到的...

  • 网格中的每个columnsdiv 的边距为排水沟宽度的一半 - 当 div 并排放置时，它们会形成一个完整的排水沟
  • 它通过使row盒子略宽于 1000 像素一个排水沟宽度来避免外边缘的缩进 - 这会吞噬最外边缘上多余的一半排水沟
  • 当切换到小尺寸时，所有的变化是每个columnsdiv 现在跨越 12 个空间 - 悬垂仍然像以前一样

希望有帮助！

于 2013-08-31T22:27:33.267 回答