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>
我们将看到,列宽在大屏幕尺寸中均分。
![](https://i-blog.csdnimg.cn/blog_migrate/9bfcedbc226be3f182164a620658d36a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9bfcedbc226be3f182164a620658d36a.png)
在小视口中,将根据指定的小网格号调整列。
![](https://i-blog.csdnimg.cn/blog_migrate/1496b436011a9b6e0a56c75b255580b9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1496b436011a9b6e0a56c75b255580b9.png)
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插件应该可以正常工作。
![](https://i-blog.csdnimg.cn/blog_migrate/32069053d015f063da59ed07bbb08779.png)
![](https://i-blog.csdnimg.cn/blog_migrate/32069053d015f063da59ed07bbb08779.png)
正如ZURB解释的那样,此开关背后的决定是减轻代码基础并使速度更快。
最终思想
Foundation是一个很好的框架,可用于构建您的可收回式网站。 但是,如果您使用以前的版本构建了一个版本并决定升级,则似乎需要做一些工作。
翻译自: https://www.hongkiat.com/blog/a-look-into-foundation-4-responsive-framework/