foundation 框架_调查：Foundation 4响应框架-CSDN博客

ZURB最近发布了其流行的响应框架Foundation的新版本。在此版本中，他们进行了一些重大更改，删除了一些组件，并添加了新功能。因此，我认为此发行版中应注意以下几点。

让我们检查一下。

变量

当您打开_settings.scss （Foundation为颜色，长度和其他内容设置变量）时，最明显的变化就是“ 变量名” 。例如，这些是用于在Foundation 3中存储网站配色方案的变量：

$mainColor: #000;
$secondaryColor: #fff;
$alertColor: #f3f3f3;
$successColor: #ccc;

在版本4中，这些变量变为：

$primary-color: #000;
$secondary-color: #fff;
$alert-color: #f3f3f3;
$success-color: #ccc;

如果您以前使用Foundation 3构建，则这些更改肯定会或多或少地影响您的网站。而且，您可能必须对SCSS样式表进行一些重大调整以反映所做的更改。

此外，Foundation还添加了更多变量，以使网站组件样式更具灵活性 。例如，Foundation现在提供变量来定义主体背景颜色和全局圆角，而在以前的版本中则不可用。

$body-bg: #fff;
$global-radius: 3px;
$global-rounded: 1000px;

因此，您可能还需要检查是否应使用提供的变量替换当前的样式定义。

网格

构建网格的基本概念与以前的版本相同，但在此发行版中，Foundation对移动网格进行了增强。基金会有两种类型的网格大小，小和大，现在有12列用于小网格。

给定以下标记

<div class="row">
	<div class="small-2 large-4 columns">...</div>
	<div class="small-4 large-4 columns">...</div>
	<div class="small-6 large-4 columns">...</div>
</div>

我们将看到，列宽在大屏幕尺寸中均分。

在小视口中，将根据指定的小网格号调整列。

emCalc函数

em是一个相对单位度量，因此不确定1.879em到底有多少。取决于指定的基本字体大小，返回值可能会略有不同。

在此最新版本中，Foundation可以轻松将em单元与emCalc()函数一起使用。只需添加像素值，就像这样。

width: emCalc(10px);

当我们将其编译成CSS时，它将以em单位返回。计算基于_settings.scss中提供的$em-base变量中指定的值。

切换到Zepto.js

Foundation 4使用jQuery上的 Zepto.js作为默认JavaScript库来运行插件。 Zepto.js是一个轻量级的JS库，具有与jQuery兼容的API。因此，从技术上讲，以前版本的Foundation jQuery插件应该可以正常工作。

正如ZURB解释的那样，此开关背后的决定是减轻代码基础并使速度更快。

最终思想

Foundation是一个很好的框架，可用于构建您的可收回式网站。但是，如果您使用以前的版本构建了一个版本并决定升级，则似乎需要做一些工作。

翻译自: https://www.hongkiat.com/blog/a-look-into-foundation-4-responsive-framework/