石家庄高端建站：用容器单元构建强大的布局

2019.08.13 mf_web

169

容器单元是一组专门的CSS变量，允许您使用列和装订线构建网格，布局和组件。它们反映了UI设计软件中的布局功能，其中仅配置三个值可为您的文档提供一组全局列和排水沟来进行测量和计算。

石家庄高端建站它们还在文档的任何位置提供一致的宽度- 无论其嵌套深度，父级宽度或其兄弟元素如何。因此，而不是要求的组重复的.grid和.row从父元素，容器计量单位:root文档的-就像使用rem单位。

什么使集装箱单位不同？

来自流行框架（例如Bootstrap或Bulma）的网格具有相同的基本限制：它们依赖于诸如“百分比”之类的相对单位来构建列和排水沟。

这种方法使开发人员在需要使用这些测量时使用特定的HTML结构，并且需要parent > child嵌套宽度才能正确计算。

不相信？试试自己：

打开任何 CSS 框架的网格演示 ;
检查一列并注意宽度;
使用DevTools，将该元素拖到文档中的其他位置;
请注意，列的宽度在传输过程中已更改。

运动自由（......不是英国退欧）

容器单元允许您使用一组全局单元更自由地调整元素大小。如果您想构建一个三栏宽度的侧栏，您只需要以下内容：

.sidebar {
  width: calc(3 * var(--column-unit));
  /* or columns(3) */}

您的...class="sidebar">...元素可以存在于文档内部的任何位置 - 无需特定的父元素或嵌套。

设计师和开发人员拥有出色的中间环境，有助于从设计软件转换为前端模板：数字。

模块化秤非常出色，不仅因为它们可以帮助设计师为其排版带来和谐，还因为开发人员可以将它们为一个简单的系统。这同样适用于基线网格：极好，自我记录系统与小配置（一个根数）和大规模的一致性。

容器单元的设置方式与设计人员使用Sketch配置布局设置的方式相同：

设计师和开发人员使用相同工具构建的任何机会都可以大大提高效率，并在两种专业中培养新思维。

开始用容器单位建造

使用三个值定义网格比例：

:root {
  --grid-width: 960;
  --grid-column-width: 60;
  --grid-columns: 12;}

这三个值定义了列与网格成比例的宽度。在上面的示例中，列的宽度为60 / 960。从剩余空间自动计算排水沟。

最后，为容器设置宽度：

:root {
  --container-width: 84vw;}

注意：--container-width 应设置为绝对单位。我建议使用 viewport units 或 rems。

您可以--container-width在任何断点处更新您的所有容器单元将相应更新：

@media (min-width: 800px) {
  --container-width: 90vw;}@media (min-width: 1200px) {
  --container-width: 85vw;}/* what about max-width? */@media (min-width: 1400px) {
  --container-width: 1200px;}

您现在已经解锁了两个非常强大的单元来构建：

--column-unit
--gutter-unit

列跨度：第三和最后的武器

比使用柱子或排水沟建造更常见的是跨越两者：

列跨度很容易计算，但编写起来不是很漂亮。对于跨列，我建议使用预处理器：

.panel {
  /* vanilla css */
  width: calc(6 * var(--column-and-gutter-unit) - var(--gutter-unit));
  /* pre-processor shortcut */
  width: column-spans(6);  }

当然，您可以为我到目前为止提到的每个容器单元使用预处理器快捷方式。让我们用设计实例对它们进行测试。

使用容器单元构建组件

我们来看一个设计示例并将其分解：

此示例使用列，装订线和列跨度。由于我们只是存储一个值，因此容器单元可以用于其他CSS属性，例如定义高度或提供填充：

.background-image {
  width: column-spans(9);
  padding-bottom: gutters(6);
  /* 6 gutters taller than the foreground banner */}.foreground-banner {
  width: column-spans(8);
  padding: gutters(2);}.button {
  height: gutters(3);
  padding: gutters(1);}

抓住准则

CSS：container-units-css.css
SCSS函数：container-units-css-fuctions.scss
演示和文档：容器单位

:root {
  /* Grid proportions */
  --grid-width: 960;
  --grid-column-width: 60;
  --grid-columns: 12;
  /* Grid logic */
  --grid-gutters: calc(var(--grid-columns) - 1);
  /* Grid proportion logic */
  --column-proportion: calc(var(--grid-column-width) / var(--grid-width));
  --gutter-proportion: calc((1 - (var(--grid-columns) * var(--column-proportion))) / var(--grid-gutters));
  /* Container Units */
  --column-unit: calc(var(--column-proportion) * var(--container-width));
  --gutter-unit: calc(var(--gutter-proportion) * var(--container-width));
  --column-and-gutter-unit: calc(var(--column-unit) + var(--gutter-unit));
  /* Container Width */
  --container-width: 80vw;}@media (min-width: 1000px) {
  :root {
    --container-width: 90vw;
  }}@media (min-width: 1400px) {
  :root {
    --container-width: 1300px;
  }}

为什么使用CSS变量？

“预处理器多年来已经能够做到这一点$variables- 为什么你需要CSS变量？”

不完全的。虽然您可以使用变量来运行计算，但是当其中一个变量更新它的值时，您无法避免编译不必要的代码。

让我们采用以下网格的简要示例：

.grid {
  $columns: 2;
  $gutter: $columns * 1rem;
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  grid-gap: $gutter;
  @media (min-width: $medium) {
    $columns: 3;
    grid-template-columns: repeat($columns, 1fr);
    grid-gap: $gutter;
  }
  @media (min-width: $large) {
    $columns: 4;
    grid-template-columns: repeat($columns, 1fr);
    grid-gap: $gutter;
  }}

此示例显示了如果变量发生更改，每次对SASS / LESS变量的引用都必须重新编译 - 为每个实例重复代码。

但CSS变量与浏览器共享逻辑，因此浏览器可以为您进行更新。

.grid {
  --columns: 2;
  --gutter: calc(var(--columns) * 1rem);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: var(--gutter);
  @media (min-width: $medium) {
    --columns: 3;
  }
  @media (min-width: $large) {
    --columns: 4;
  }}

这个概念有助于形成集装箱单元的逻辑; 通过在根目录存储一次逻辑，文档中的每个元素在更新时都会监视这些值，并相应地做出响应。

石家庄高端建站