这是我的专栏“极端用户体验”，适用于产品，设计和前端阅读。阅读和阅读后，知道如何设计与最终用户体验的互动。阅读前端，知道如何实现产品需求。如果您是产品经理，则根据我的专栏内容设计互动，但是前端告诉您无法实现某个功能。请把文章扔给他！不客气！
在本文中，我讨论了如何实现自适应屏幕宽度的宽度：“如何实现响应式帆布？保持帆布比？教您让帆布自适应屏幕宽度！”，画布的缩放取决于此CSS属性。
它是指元素的一些2D/3D转换。本文解释了相关的预防措施。
许多更改将修改DOM元素的形状。
我们知道我们只能按照框模型的元素行动。通常，我们会与框型号接触。
这些元素最初是矩形和正（水平和垂直的矩形）。
转换后，它可能会旋转并伸展，并且可能成为弯曲的平行正方形。
转换变换后，DOM中元素占据的位置不会改变！
换句话说，如果元素a被转换转换，如果后面还有其他元素B，那么无论您更改A，B的位置都不会受到影响。这样，DOM渲染效率将很高。
想想，为什么要设计这个？
想象一下这样的场景：转换可以与动画结合使用。如果您放置一个旋转的矩形，那么Y轴的高度始终更改，以便其背后的所有元素随着y坐标而改变动画，需要修改过多的次，严重地进行性能。因此，在转换转换后，元素在DOM中占据的位置不会改变。
参考示例：
掘金
参考示例：
掘金
这是因为堆叠上下文，当您为元素设置属性时，它是一个“高级人物第一类”，无论其他元素有多大，它都会被其他非元素覆盖。
文档中的层由符合以下条件的元素形成：
例如，默认值被中心放大并减少了。换句话说，在收缩之前和之后：中心点没有变化。
通常，我们习惯于设置或在顶部和左上角的中间。
如果要实现0.5px的分区线，并且该细分线将与Div一起实现。您可能会写下以下内容：
但这是错误的，因为它只是显示了0.5px的高度，实际上，它仍然占据1px的高度（请参阅预防措施的第一个点）。分段线与下面的其他元素之间的距离将有一个错误0.25px（请参阅第三点预防措施）。
因此，您最好像这样写0.5px的部门：
每当您是一个追求最终的人，或者您的设计师是追求最终的人，很容易找到这个0.5px的错误。不要选择！如果您有收获！谢谢你！
我是赫尔钦。我已经独立开发了一系列在线棋盘游戏。这是一个网页。它可以轻松地与朋友，武兹国际象棋，乌诺和其他游戏一起玩游戏。没有费用，没有广告，您可以开始玩。制作迷你游戏”和“极端用户体验”。
原始：https：//juejin.cn/post/71117953798209543