如何使用 Chrome 测量元素之间的像素距离?
Posted
技术标签:
【中文标题】如何使用 Chrome 测量元素之间的像素距离?【英文标题】:How can I use Chrome to measure pixel distance between elements? 【发布时间】:2019-02-02 10:39:35 【问题描述】:标题说明了一切。是否可以不进行任何扩展?
【问题讨论】:
跨站资源superuser.com/questions/1293458/… 【参考方案1】:使用 Chrome 扩展程序,此扩展程序非常适合检查任何网络元素之间的像素距离。
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US
希望对你有帮助
【讨论】:
您能否分享一个描述如何使用此工具的链接?我似乎无法弄清楚。我想测量元素内的尺寸。【参考方案2】:这种方法行得通吗?获取包含交替的黑白点(如棋盘)的图像,其中每个点为 1 像素。使其成为背景图像。您可以放大 1000% 左右并计算点数。
【讨论】:
这就是问题值得以某种方式得到的答案;)【参考方案3】:我一直在努力解决这个问题,并在 devtools 中找到了答案。首先,在响应模式下,在标题的最右侧有一个更多选项菜单,其中包含一个显示标尺选项。选择那个。然后在元素下的详细信息设置中,有一个显示标尺选项可以检查。使用这两种方法,选择一个元素将显示从标尺延伸到元素的线条,以便您可以看到它们的位置。您可以查看各种元素的开始和结束以计算间距。我需要处理边缘间距,所以它更容易一些。 我不知道如何在不处于响应模式时打开标尺,但是当我回到网页布局时它们仍然存在。
【讨论】:
【参考方案4】:您可以做的一件事是使用Console
选项卡来计算两个元素之间的水平或垂直距离,使用维度/位置属性/方法,例如Element.getBoundingClientRect()
或htmlElement.offsetTop
,但我猜您正在寻找一些东西这更像是一种工具,而不是编写自己的解决方案。
另一个可能更有用的选项是使用Elements > Styles
面板逐步添加某种视觉效果,让您可以测量您需要的内容。例如,您可以将box-shadow
/ outline
添加到一个元素并逐个像素地增加其大小,直到它接触到它旁边的元素,这样您就可以知道它们之间有多少像素。
这是一个简单的代码示例/“演示”,以便您明白我的意思:
html,
body
width: 100vw;
height: 100vh;
margin: 0;
div
position: absolute;
display: flex;
border: 3px solid black;
top: 10px;
bottom: 10px;
width: 100px;
box-sizing: border-box;
.a
left: 10px;
.b
left: 120px;
animation: measure 2s linear 0s infinite alternate;
@keyframes measure
0%, 10% box-shadow: 0 0 0 0px red;
10.001%, 20% box-shadow: 0 0 0 2px red;
20.001%, 30% box-shadow: 0 0 0 3px red;
30.001%, 40% box-shadow: 0 0 0 4px red;
40.001%, 50% box-shadow: 0 0 0 5px red;
50.001%, 60% box-shadow: 0 0 0 6px red;
60.001%, 70% box-shadow: 0 0 0 7px red;
70.001%, 80% box-shadow: 0 0 0 8px red;
80.001%, 90% box-shadow: 0 0 0 9px red;
90.001%, 100% box-shadow: 0 0 0 10px cyan;
<div class="a">A</div>
<div class="b">B</div>
除此之外,您最好的选择是使用扩展。
我会推荐Dimensions,这是一个 Chrome 扩展程序,它会在您移动光标直到找到“障碍物”时不断自动测量垂直和水平空间,这比绘制一个框来进行测量要快得多、更容易,就像大多数其他测量/标尺扩展一样。
【讨论】:
【参考方案5】:您可以使用 Firefox 开发人员工具,因为它支持测量像素和开箱即用的距离。它不需要任何外部插件。 请查看here
【讨论】:
如果您有新问题,请点击 按钮提出问题。如果有助于提供上下文,请包含指向此问题的链接。 - From Review以上是关于如何使用 Chrome 测量元素之间的像素距离?的主要内容,如果未能解决你的问题,请参考以下文章