如何在Zurb foundation 4中使用断点？

6 回答

• 0

  在Zurb Foundation 4中，我在我的网格列中添加了以下内容 . 只需在你的基础全局和网格的@import之后添加它 .

  @if $include-html-grid-classes != false {
  
    /* Styles for screens that are atleast 768px and max width 1024px */
    @media #{$small} and (max-width: 1024px) {
  
      @for $i from 1 through $total-columns {
        .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
      }
  
      @for $i from 0 through $total-columns - 1 {
        .row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
      }
  
      @for $i from 1 through $total-columns - 1 {
        .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
        .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
      }
  
      .column.medium-centered,
      .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }
  
      .column.medium-uncentered,
      .columns.medium-uncentered {
        margin-#{$default-float}: 0;
        margin-#{$opposite-direction}: 0;
        float: $default-float !important;
      }
  
      .column.medium-uncentered.opposite,
      .columns.medium-uncentered.opposite {
        float: $opposite-direction !important;
      }
  
    }
  
  }
  

  现在你可以像使用小型和大型网格一样使用媒体 .

  https://gist.github.com/poeticninja/5985220

  回复于 2024-04-29T08:14:07+08:00
• 0

  medium grid的新实验性功能，这是CSS file

  回复于 2024-04-29T08:14:07+08:00
• 2

  也许我迟到了，但我不同意lolmaus对基金会的整体论点（除非你确实需要超级网格粒化） .

  对于那些多年来一直使用他自己的CSS网格系统的人来说，我发现Foundation 3（我试过的第一个版本）非常擅长让我构建桌面网站 - >平板电脑 - >电话响应，一直以来让我控制图形密集型设计和布局 . （我想我刚刚读到F4已经为不同的格式实现了小型和大型网格系统 . ）

  我不能和任何其他系统说话，因为我没有尝试过它们（除了Bootstrap，它比我需要的更全面），但如果你是一个动手设计师，在HTML5 / CSS3中有一些好的印章，那你就是'我会和基金会做得很好 .

  如果有帮助，我在F3中的断点设置是1200或更多，1199-768和767或更少（仅在水平上浏览手机上的网站） .

  回复于 2024-04-29T08:14:07+08:00
• 0

  Can you set medium columns on Zurb Foundation 4? http://adioso.com/blog/

  回复于 2024-04-29T08:14:07+08:00
• 1

  Foundation的流体网格围绕768px的单个断点构建，因此基本上是移动和桌面/平板电脑 . 一切都围绕着这个概念，这就是为什么你有像 hide-for-small 和 show-for-small 这样的类 .

  任何额外的断点都必须使用媒体查询进行自定义，但是由于Foundation是一个流畅的网格，这并不像你想象的那样令人恼火 . 我们的想法是，您网站的“大型”（例如桌面版）版本应合理扩展到“中型”（平板电脑）视口，而无需过多的CSS重构 .

  我在F3中构建的大多数站点在768px断点处进行了显着转换，然后我编写了一些其他媒体查询来调整断点上方所需的任何内容（所以我通常会对一些更依赖的断点进行一些CSS调整在设计上，但例如在行宽为1150px的网站上可能是900px和1050px . 这些天平板电脑的分辨率相当高，并且在大多数情况下都倾向于显示桌面风格的布局 .

  lolmaus确实有一点，基金会不仅仅是一个响应式网格工具 . 还有其他更轻的框架可以提供更加精细和方便的方式来自定义网格大小和行为，而Foundation是一个完整的前端框架，用于基于单个断点概念的快速原型设计 .

  你也可以添加一个辅助（例如平板电脑/桌面）断点，没有太多的麻烦，但它需要一些工作 . 但是，我建议你尝试使用Foundation，并问自己是否真的需要3种不同的风格而不是2种风格 . 我之前 Build 了针对桌面/平板电脑/移动三元组的响应式网站，老实说我从未回过头来看过六个月前我开始使用基金会 .

  回复于 2024-04-29T08:14:07+08:00
• 0

  基金会有两种口味 .

  你熟悉 non-semantic CSS version . 它有一个预构建的CSS文件，其中包含所有可能的类组合的规则 . 当然，他们不能仅仅因为他们不是心灵感应而预先满足你所需要的一切 . 他们只为两个网格大小制作了类 .

  另一种味道是 semantic SASS version . 它没有使用预先构建的CSS文件 . 使用SASS版本，您只需创建所需的样式，并在语义上将它们应用于站点的元素 .

  this page的底部描述了如何使用SASS进行网格 .

  使用SASS版本的Foundation，您没有预设的媒体查询，您可以根据需要自行设置 .

  基金会没有提供用于处理媒体查询的任何工具，因此您必须手动设置它们 . 它也缺乏定义多个网格的工具 . 为了针对不同的屏幕尺寸或网站的不同部分设置不同的网格设置，您必须为每次使用重新定义基础网格设置，这相当麻烦 .

  也许，基金会根本不是创建响应式网格的最佳工具 . 相反，尝试Singularity与Breakpoint Slicer - 这些是为此目的而创建的，具有广泛的文档和开发人员在StackOverflow上的良好支持 .

  回复于 2024-04-29T08:14:07+08:00