您是否知道TNW Conference完全致力于探索今年的新设计趋势?在此处查看完整的“ Sprint”程序。

 
自网页设计开始以来，我们就以像素为单位来衡量我们的网站。某种程度上的绝对测量值，描述了屏幕分辨率的最小可视单位。
当然，从工程学的角度来看，我已经与这些小怪物建立了一种非常讨厌的关系。一方面，像素是一种易于可视化的普遍测量。鉴于其绝对性质，我知道2px边框在我的台式机，iPhone和平板电脑上的宽度相同。它们为设计人员和工程师之间提供了一个通用的度量单位，使设计意图到生产代码的转换变得非常简单。
另一方面，他们的绝对性可能对我们不利。像素不考虑其广泛的上下文，因此，像素的应用可能会导致脆弱的体验;对他们的环境没有反应。
如今，我们的用户正在使用数量更多的便携式设备访问网络。在手机，平板电脑，台式机，冰箱，手表上-清单还在继续。在二十年的设计演进过程中，以灵活性和适应性为基础进行构建从未像现在这样重要，这进一步鼓励了我们创造更加引人入胜的沉浸式体验。
可以说，仅像素就不再切割了
以我的经验，设计出色经验的关键是要了解将要建立的技术的机会和约束。对于Web界面，我们正在谈论CSS。
在工程方面，CSS的进步为我们提供了许多新颖的方法来测量Web元素的虚拟尺寸和距离。您可以阅读有关W3C上CSS基础的所有信息，但是我不会在本文中深入探讨。
奇怪的是，设计工具的世界赶上来有点慢。当我坐在围栏上，潜入设计和工程领域时，我注意到近年来出现了三角洲。我们在设计过程中使用的像素度量不再总是映射到我们在工程过程中使用的像素度量。通用语言现在需要翻译。
归根结底，良好设计的关键在于理解支持它的技术的机会和约束。因此，我将逐步介绍我每天使用的度量标准，希望它们可以为您的下一个设计提供一些启发。开始了。
百分比(%)
百分比是基本的相对度量。您可能会想到，有效百分比值在0%到100%之间，并且在大多数情况下是相对于父级的。
width：100%的子级将跨越父级的整个宽度。父母的字体大小为16px时，孩子可以通过将其字体大小设置为87.5%获得14px。
直到几年前，百分比还被大量用于支持网格框架，包括Twitter Bootstrap之类的先驱。百分比的问题在于，在实践中很难使用百分比，而且诊断行为并不总是那么容易。
CSS规范的最新进展引入了令人振奋的布局新方法(flexbox和grid)，这有助于我们避免在元素上设置固定的百分比宽度。因此，我很少使用此度量，但出于完整性考虑而将其包括在内。
临时单位(EM，REM)
临时单位(EM)和根临时单位(REM)是从字体大小设置中获取其基本值的相对度量。我们选择的值乘以该基值。
像百分比一样，新兴市场也被锁定在其母公司。另一方面，REM是指我们应用于文档根目录的基本字体大小。乍一看，这似乎有些奇怪，是的，但是它们非常有用。
EM非常适合针对相邻文本调整UI元素(例如，图标)的大小。假设父字体的字体大小设置为16px，则图标高度1em将与文本高度匹配。
REM非常适合在版式和空白之间建立和谐与一致。根字体大小为16px，标准白色间距值为0.5rem，将建立一个8px的网格—哇。
此外，随着设计的增长保持这种一致性更加简单。如果您日后需要修改版式和间距堆栈，则只需调整根字体大小即可。
新兴市场是一个小众市场，但非常实用。 REM是我日复一日使用的主食。
视口单位(VH，VW)
有时，了解视口的高度或宽度(浏览器屏幕尺寸)会有所帮助。当我们创建沉浸式布局以扩展到填充屏幕的某些部分时，通常就是这种情况。
CSS为我们提供了两个简单的度量，即视口宽度(VW)和其高度(VH)。我们输入的值是宽度或高度的百分比，因此75vh表示视口高度的75%。
角色单位
这对我来说是很新的。字符单位(CH)相当小众，通常用于设置段落的宽度，以帮助提高可读性并创建易于使用且易于扫描的内容。
单个字符单位宽度：1ch应该导致一个段落，其中每个字符都放在新行上，并且确实如此。尽管实际上，ch单位并不是真正在计算字符，而是通过获取任何给定字体中零字符的宽度并将其乘以我们提供的值来估算每行的字符数。
WCAG辅助功能指南建议每行最多80个字符/字形，而CJK字形每行最多40个字符。我什至认为这是很高的—看这篇文章，我们每行阅读大约70个字符。您可以在此处阅读更多有关易读性的信息。
小数单位(FR)
之前，我谈到了百分比，尤其是在实际中，使用百分比有点麻烦。
假设我们要基于8列网格创建布局。有两个面板;主要内容区域可填充8列中的5列，侧面面板可填充其余3列。要使用百分比，我们必须手动计算5/8和3/8。
.main-area {宽度：62.5%}
.sidebar {宽度：37.5%}
每次添加新面板时，都必须返回并重新计算每个值，以重新分配可用空间。 OY合租!
//使用百分比
.main-area {宽度：50%}
.sidebar {宽度：25%}
.new-panel {宽度：25%}
小数单位是我们的救星。很简单，它们用作包装(父)容器的一部分，以定义内部空间的分段。这是一个使用CSS网格框架的快速示例：
宽度为1fr的一个元素将跨越容器的整个宽度
宽度为1fr的两个元素将平均共享空间
宽度为1fr的另一个元素为2fr的另一个元素将分别接收空间的1/3和2/3
简而言之，我们使用fr定义分数的最高编号。分数的底数是通过将每个值相加而得出的。
//使用分数单位，带有两个面板
.wrapper {
显示：网格;
grid-template-columns：5fr 3fr;
} //使用小数单位，更改为三个面板
.wrapper {
显示：网格;
grid-template-columns：2fr 1fr 1fr;
}
如您在上面的示例中看到的，分数单位使扩展和调整布局以适应我们的新要求变得异常简单。
作为一个密切关注互联网发展的人，我为我们今天可用的工具和技术感到鼓舞。