我发现,默认情况下,foundation这样做是为了给行设置样式:
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
}
然而,作为一个响应框架,为什么它会被限制在62.5rem?效果是惊人的丑陋,这是一个固定宽度的框,始终无法随着屏幕的宽度而流动。它背后的逻辑是什么?如果我用100%覆盖它怎么办?这会导致其电网系统出现问题吗?
谢谢
他们设置了这个限制,因为不是每天都有"全宽设计";他们(在Foundation6中)引入了修饰符类.expanded
,该类将行添加为全宽;如果你想在Foundation5中有这种行为,你有两个选择:
1.创建你的'.expanded类
Foundation限制了行的max-width
,因此如果将.expanded
类添加到希望具有流体的行中,并添加一些代码,如:
.row.expanded { max-width: none }
你可以让它工作。。。可能需要额外的代码才能使嵌套行正常工作。
2.修改类/更改设置
Foundation是一个非常可定制的框架,如果你使用SASS版本,你可以很容易地将变量$global-width
修改为100%。如果您使用的是预构建版本,只需在代码中找到.row
声明并将max-width
修改为100%即可。
就是这样,希望这能有所帮助。
62.5rem在Foundation中相当于1000px。下载.css文件(对我来说,这是最好的方法,只是简单、完全可定制的css),在第126行(基础5.5.2)上,你可以很容易地覆盖它:
.row {
margin: 0 auto;
max-width: 62.5rem;
width: 100%;
}
在CSS3中引入了一个新单元,最初用于字体大小调整,rem代表"root-em",是相对于root(html)的。
大多数浏览器都定义了16px的基本值,因此1rem等于16px。然后你得到62.5rem等于1000px。
我想width:100%
规则可能是不支持rem单元的浏览器的处理程序错误。
如果需要,可以更改行的宽度,只需删除或注释最大宽度规则即可。然后将根据需要进行100%渲染。例如,Bootstrap为容器设置960像素的宽度。
在我的情况下,我修改了最大宽度规则,因为我的布局需要1366px,所以我把这个值变成了85.375rem
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 85.375rem; // 1366px width for example
}
看看这篇文章来澄清你对rem的看法:http://www.sitepoint.com/understanding-and-using-rem-units-in-css/
欢呼
您可以将其更改为您想要的任何宽度,而不会造成任何伤害。它只会让你的专栏更宽。
通常我使用rem-calc(1200)或100%
您可以为此使用媒体查询。。。
示例
@media #{$large-up} {
$row-width: 100%;
}
它不会"破坏"任何东西。这是一个你可以改变的变量。
如果您不确定是否也可以使用自定义基础生成器中已设置的所有参数启动项目:https://foundation.zurb.com/sites/download.html/#customizeFoundation
例如,我将从我的内容的1200px宽度开始,因此我计算:1200/16=750rem
无论如何,删除任何最终不会使用的组件都是个好主意。