u3d中inspector_在浏览器中细化:使用Visual Inspector获得完美像素

盖锐进
2023-12-01

u3d中inspector

作为“像素完美”是一些东西,变得不那么重要的网页设计师,一旦大家都接受,网站可以看看在不同的屏幕和设备的不同。 但这并不意味着对细节的关注就不那么理想了。 在本教程中,我将向您介绍一个工具(Chrome扩展程序),该工具可以帮助您实现网页设计中的像素完美。

视觉检查器简介

使用Visual Inspector

首先,请访问www.canvasflip.com/visual-inspector下载Chrome扩展程序。 安装后,系统会要求您注册一个帐户(免费,但升级费用为每位用户每月$ 5)。 您已经开始跑步了!

检查器允许您选择页面上的任何元素并检查其属性。 例如,当我们在Tuts +主页上选择徽标时,检查员将显示以下内容:

我们可以看到使用的标记以及分配给元素的各种类。 我们还可以看到填充,边框和其他样式。 在这种情况下,我们可以看到图像源,向下滚动可以看到更多。

出口

在此阶段,我们可以导出可见的任何资产。 图像文件虽然不是SVG格式,但可以随时获取。 甚至文本和其他样式也可以导出为JPG或PNG,并带到您选择的设计应用程序中,这非常有用。

测量

在浏览器中移动鼠标并单击各种元素,将显示已指定和隐含的度量和对齐方式,从而帮助您牢固地了解所有事物与其他事物之间的关系,并帮助您实现像素完美。

更改和保存属性

与浏览器的许多其他检查工具一样,您可以更改喜欢的任何元素的属性和样式。 但是,正如您可能要检查的那样,对于Visual Inspector,所有样式都可以通过视觉工具(滑块,颜色选择器等)进行更改。

更改后,您可以单击CSS Output按钮以显示您创建的新样式。

或者,您可以在“ 信息”选项卡上单击“ 同步更改 ”,然后您所做的编辑将保存到您的帐户中。 这使您可以在将来重新审视那些更改,而这些更改是普通浏览器检查员默认情况下不允许的。

结论

对于那些喜欢在浏览器中进行优化的人来说,Visual Inspector是一个很好的工具。 检查已经存在的内容,进行所需的任何更改,然后导出这些更改或将其保存以供以后使用。 而且,如果您升级,也可以与团队成员进行协作。 去检查一下,然后在评论中告诉我们您的想法!

翻译自: https://webdesign.tutsplus.com/tutorials/pixel-perfection-with-visual-inspector--cms-30822

u3d中inspector

 类似资料: