Nils Binder 谈论 一种用于两个元素之间间距的技术。 想象一下大屏幕上的标题,在左上角有徽标,在右上角有导航栏。 然后是小屏幕,当它们不能再在同一个“行”上并且需要换行时,它们不会只是换行,而是被_居中_。
视频解释得更好
我的想法是:我会找到我想让这种情况发生的断点的精确像素值,然后编写一个媒体查询来重新设置样式以做到这一点。
但是……媒体查询仅适用于整个浏览器窗口宽度。 虽然这可能在这种情况中有效,因为它是一个全站级别的关注点,但我理解不想编写媒体查询的愿望。 Nils 的想法借鉴了 Heydon 的 神圣信天翁 的概念,以实现完全不使用媒体查询。 因此,您可以在更小的范围组件上使用它,您需要在与浏览器窗口大小无关的特定大小处调整断点。
我最近使用了这种技术。 文档非常好,所以我在实现它时没有遇到任何问题。 在遇到这样的设计理念时,您应该尝试一下。
这几乎完全是我一直试图为我正在做的一个项目解决的问题! 它没有检查的唯一一个框是我不希望在发生换行的地方使用任何魔术数字进行大小调整。 但对于我的构建,它几乎完全是静态的,我能够通过将
ch
引入基于导航内容的计算来解决这个问题。 基本上是 N 个字符加上 N 个导航项目的填充加上已知的徽标宽度加上间隙。 这需要很多计算,而且我担心在计算中拥有所有这些会损害性能,因此我正在研究统一使用 ch 单位,以便在构建时尽可能多地完成。 但它有效!是的,关于用于阈值的“魔术数字”的事情也让我持怀疑态度。 我想你只能在静态的、永远不会改变的内容上使用它。
但我真的很喜欢尽可能避免使用媒体查询的想法!