设计人员应该知道CSS单元

最新推荐文章于 2024-09-26 11:55:47 发布

weixin_26715991

最新推荐文章于 2024-09-26 11:55:47 发布

阅读量110

点赞数

文章标签： python java 算法 c++ css

原文链接：https://uxdesign.cc/css-units-that-you-should-know-as-designer-eec2a4725230

版权

Ever since I started to design — mostly practically implementable designs, I keep experimenting to fasten up the process from Design to Deployment with ease and efficiently.

Ë版本，因为我开始设计- 实际上大多实施的设计 ，我一直尝试从设计过程扣上部署轻松，高效。

Developers use their expert programming and coding knowledge to breathe life into the designer’s creative vision.

开发人员使用其专业的编程和编码知识，将生活带入设计师的创造力视野。

But I see a huge gap when it comes to Designer-Developer collaboration to put up the exact vision into final build. Let’s start learning —

但是，在将设计师与开发人员的协作纳入最终构建的确切愿景时，我看到了巨大的差距。让我们开始学习-

什么是单位？ (What are units?)

According to Tutorials Point,

根据Tutorials Point ，

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g. border = “1px solid red”.

CSS支持许多度量，包括诸如英寸，厘米，点等的绝对单位，以及诸如百分比和em单位的相对度量。在样式规则中指定各种度量时，您需要这些值，例如border =“ 1px solid red” 。

绝对单位 (Absolute Units)

Absolute length units are fixed and a length expressed in any of these units will appear as exactly that size.

绝对长度单位是固定的，用这些单位中的任何一个表示的长度将恰好与该尺寸相同。

相对单位 (Relative Units)

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums

相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放更好

Absolute length units are not recommended for use on screen, because screen sizes vary so much. They can be used if the output medium is known, such as for print layout.

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。 如果已知输出介质，则可以使用它们，例如用于打印布局。

However, most of the lengths we apply in our design tools use Absolute units: cm, mm, in, px, pt, pc.

但是，我们在设计工具中应用的大多数长度都使用绝对单位：cm，mm，in，px，pt，pc。

Image for post — Pixel being used most in digital UI design

For digital UI design, developers prefer to use relative length units to make code responsive, flexible and scalable: em, ex, ch, rem, vw, vh, vmin, vmax, %

对于数字UI设计，开发人员更喜欢使用相对长度单位来使代码响应，灵活和可扩展：em，ex，ch，rem，vw，vh，vmin，vmax，％

如何使用相对单位？ (How to use relative units?)

“There is no way I can use relative units in Design tools”

“我无法在设计工具中使用相对单位”

Right, there is no direct way to use relative units, but how about to hand-off design specs in relative units instead of absolute units?

是的，没有直接使用相对单位的方法，但是如何以相对单位而不是绝对单位来传递设计规范？

This will save a whole lot of time of your engineering team to directly use length in relative unit.

这样可以节省您的工程团队大量时间，直接使用相对单位的长度。

使用通用相对度量 (Using universal relative measure)

Use spatial grids to calculate relative lengths easily without decimal points — Refer to my guide to use spatial grids
使用空间网格轻松计算相对长度而无需小数点- 请参阅我的指南以使用空间网格
Use artboard/ frame size relative to aspect ratio and prefer to use even values for not calculating half pixels — Refer to my guide to select perfect artboard size
使用相对于长宽比的画板/框架大小，并且更喜欢使用偶数值来不计算半像素— 请参阅我的指南以选择理想的画板大小
Use scale constraints in Design tools for relative margin and padding lengths — Refer to my guide — How I design for Android/ How to design responsive dashboard design using Figma
在设计工具中使用比例约束来获得相对边距和填充长度-请参阅我的指南- 如何为Android设计 / 如何使用 Figma 设计响应式仪表板设计
Hand-off in universal relative measure — %
通用相对计量交接— ％