专栏首页杨俊标的专栏【HTML插件】帮你100%还原设计
原创

【HTML插件】帮你100%还原设计

设计狮们还在纠结重构还原到位了吗?U工们还在锻炼像素眼吗?来试试这款设计还原检查插件吧!

还原对比效果图

# 这是什么

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPhone6、iPhone7、iPhone8检查设计还原情况。

# 引入插件

    1. 准备好需要验证的设计稿,如bg.png

    2. 在重构稿中引入工具脚本contrast.js并设置图片路径

<script type="text/javascript" src="https://coderjunb.github.io/HTML-contrast/dist/contrast.js"></script>
<script type="text/javascript">
    Contrast.setBg({src:"img/bg.png"});
</script>    

3. 浏览页面,可以看到界面右下角多了个“对比工具”按钮

 

# 操作使用

    开启工具:点击“工具按钮”,插件展示操作引导(第一次加载才显示引导);

    关闭工具:点击“工具按钮”,插件隐藏;

    查看设计稿:在屏幕上半区向右滑动,左侧展示设计稿,右侧展示重构稿;

    设计稿透明度:在屏幕下半区向左滑动,设计稿逐渐透明;在屏幕下半区向右滑动,设计稿逐渐不透明;

    调整工具位置:拖拽“工具按钮”到要调整到位置;

    更换设计稿:长按“工具按钮”,选择相册,即可;

# 其他问题

    有没有设计稿背景规格?

    答:不限制规格,推荐宽750px的设计标准。

    会不会影响正常开发和上线?

    答:插件适用于检查还原度,上线时注释引用即可,不影响正常开发和上线。

设计稿有TitleBar,页面没有,该怎么办?

    答:在setBg的时候设置隐藏TitleBar,如下:

// 通过设置hideBar隐藏设计稿任务栏
Contrast.setBg({
    src:"bg.png",
    hideBar:true
});     

# 项目链接

https://github.com/coderjunb/Contrast

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 路径动画工具的诞生

    每当重构页面的时候,除了设计师精致的设计稿,还需要在页面这个蛋糕上放上一个樱桃,无论蛋糕多么美味,但樱桃的点缀却更容易吸引住顾客的目光,对,就是那些细微的动画....

    chiron
  • 电脑必备软件推荐

    这篇文章主要是记录下本人在电脑中安装的软件,主要目的一是为了推荐给读者,二是为了自己电脑重装后重新安装。

    Dreamy.TZK
  • 发福利!越狱插件可以将iPhone6升级到6s

    镁客网
  • GitHub 12个实用技巧

    在GitHub上打开一个文件(任何仓库的任何文件),在页面的右上角有一个像小铅笔的按钮。点击它,你就可以编辑文件了。当你编辑完成,点击Propose file ...

    疯狂的技术宅
  • 如何做好软件项目需求分析?

    对于软件开发团队而言,软件开发的全过程是:做什么 -> 怎么做 -> 做 -> 成果检验 -> 交付部署;其中,“做什么”对应的是需求分析过程,“怎么做”对应于...

    笑看
  • 腾讯云 Elasticsearch 进阶篇(二十七)Logstash讲解与实战

    grok是一个十分强大的logstash filter插件,他可以通过正则解析任意文本,将非结构化日志数据弄成结构化和方便查询的结构。他是目前logs...

    南非骆驼说大数据
  • 想不到吧?Adobe 2019 存在重大bug!

    因为最近发的关于Adobe 2019的内容实在太多了,已经有小伙伴心里猜测:是不是要改名叫“Adobe课代表”,大家放心,每次更新都是希望所有人能看到,尤其是已...

    课代表
  • python 技术篇-日志定期清理设置,自动清理上个月的日志实例演示

    先说一下我设置的清理日志原理: 每天都建立一个新的日志文件来存储日志,每次启用程序时检查日志目录里的所有日志文件,自动清理上个月之前的日志。

    小蓝枣
  • sublime text3 汉化

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    suveng
  • AndroidStdio(Mac)无线调试未成功

    云深无际

扫码关注云+社区

领取腾讯云代金券