当前位置: 首页 > Chrome插件推荐 > 还在找网页尺子吗?三款好用又免费的屏幕网页标尺等你拿
 
作为一个网页前端工程师,最近老板要求小编做一些美工设计,可是为难了宝宝。对于一个网页的美术工程师而言,测量web页面中元素的大小是再正常不过的操作了,因为要保证一个网页图片或元素在多种分辨率的浏览器下都能正常的显示,网页的美工开发人员经常会对元素的显示效果进行大量的测试,这其中就包括对网页元素大小的合理运用,但是对于web开发者而言主要打交道的是计算机屏幕,而不是现实中实际存在的物品,这时候再用现实中的尺子去测量元素的大小就有些不切实际了,所以网页美工开发人员需要一款能够测量计算机屏幕中显示的元素的大小的屏幕尺子插件
在同学群里问了几个同样做设计的老同学推荐屏蔽尺子插件,果然这样一个小工具还是挺多的。小编热心肠为大家推荐三款吧。
NO.1 Page Ruler

推荐指数:★★★★
功能概述
Page Ruler是一款可以测量Chrome浏览器中网页元素大小尺寸的谷歌浏览器插件。页面尺寸测量工具,前端设计师专用。可以测量页面元素、图片和文本的尺寸、位置。Page Ruler是一款可以快速测量出当前页面中某个元素大小尺寸的Chrome插件,在Chrome中安装了Page Ruler插件以后,可以点击浏览器右上角的Page Ruler插件在任何页面中启动它来测量相关的元素大小。
page ruler

NO.2 PageLiner

推荐指数:★★★★
功能概述
PageLiner是一款Chrome上的屏幕尺子插件,一个可以电脑屏幕上虚拟出尺子的绿色工具,非常实用,可以帮助开发者测量网页的尺寸。
pageliner

NO.3 Measureit

推荐指数:★★★★
功能概述

MeasureIt是一个 Chrome 扩展程序,是一个为网页设计师和开发者提供的浏览器插件,可以帮助他们在设计网站时轻松地测量和正确估计网站的元素。MeasureIt是小编非常喜欢的一款插件工具,因为他非常的小巧,并且绝对完美完成一个非常具体的任务,帮你“丈量”任何网页中的任何尺寸——一把得心应手的尺子。可以让你画出一个尺子,然后测量网页页面中任一元素的高度和宽度

如果您也是做前端开发的话,可能经常需要去测量一下网页中布局的各种测量指标,当然我们现在有Firebug这个大家伙帮忙,直接Inspect一下基本就能够得到数据。不过貌似还是有一些情景Firebug帮不上忙,比如小编碰到过的,美工同学提供设计的图稿,我不是很习惯使用其他图形编辑软件,于是MeasureIt就很好的帮助我去测量一些布局上的东西,比如边距啊,元素的大小啊等等,很喜欢。如果您不喜欢很重的大而全的工具集成类的扩展,碰巧还需要做这件事情,那就推荐您使用这个。
measureit

Grid Ruler Chrome插件

创建网格方便地测量距离。
它允许您创建纵向和横向网格, Photoshop的风格。

它有一个尺子来衡量你的网格之间的距离太大。

#使用方法: 。
- 阻力主要来自垂直/水平标尺来创建网格
- 点击垂直标尺和水平标尺进入统治者模式交集
- 而在统治者模式下,按住LT & ;按住Shift键& GT ;键得到一条直线。

Measure Ruler Chrome插件

衡量标尺显示的像素尺寸和定位。你可以测量任何网页元素
1.0版 - 启动

Web Ruler Chrome插件

统治者的措施,任何网络元素
IT像素:统治者,使您可以显示所有我们想要的尺寸(长度,高度和原点的距离),在我们的网页

命令:
1)点击鼠标左键,以便创造起源
2)移动鼠标点到你想要的大小,检测
3区)点击第二次(或回车键),以使所选择的
4)所选择的区域的所述固定尺寸可以使用键盘上或以相同的一个简单的拖放箭头键来移动。
5)从同一起点)调整区域(始终,再插上鼠标,点击空格键上,你可以从光改变统治者的主题暗,反之亦然 6) />
EN:那标尺可以让您展现什么,我们希望在我们的网页的尺寸(宽度,高度和距离原点)
命令:
1)点击鼠标左键创造原点
2)移动鼠标来调整区域要检测
3)点击鼠标左键,其他时间来定义区域(或单击回车键键盘)
4)移动选定区域的点击键盘上的箭头或拖动
5)无论如何调整区域或将其连接到鼠标(不改变原点)点击Enter键键盘按钮
6)深或浅的模式之间切换模式,点击SPACE keyboeard按钮

标签:网页尺子