一般而言,对于测量页面某个元素的大小,直接f12打开开发者工具inspect目标元素就好了,但如果要测量其他,如两个元素间的距离,是不是就没那么方便了?
这里安利一款chrome插件,better ruler,可以很方便的测量各种距离,更重要的是,它支持吸附到元素,再也不用眯着眼去量一两像素的差异了。
- 点击插件图标即可开始测量,再次点击将退出测量。
- 移动鼠标的同时按住
Alt
键(Option
, 如果是mac),可实时显示当前鼠标位置元素的大小。 - 移动鼠标的同时按住
Alt
键(Option
, 如果是mac),如果在吸附范围内(距离元素边界50px内,距离顶点15px内,具体数值可在底部工具栏自定义)可自动吸附。 - 按下
f
键,快速显示和隐藏底部工具栏。 - 按住
shift
键,切换显示和隐藏尺寸和关闭按钮。