图片精灵快速定位工具

官方地址

https://www.spritecow.com

使用步骤

1.上传sprite图片

2.设置缩放比例
由于苹果retina屏的关系,为了保证图片不失帧模糊,需要通常2倍的设计图
以iphone6为例
通常手机需要375px宽度设计图
而iphone需要750px宽度设计图
采用压缩宽度,提高图片呈现精细度
具体操作:
2-1.
background-size:375px auto
再将具体的px,转换为body的font-size比例的rem
background-size:xxx rem auto
2-2.
设置工具的缩放比,同样式中background-size中的比例,保持一致


缩放比例勾选

3.在工具官网,圈选(模糊圈选,会有像素套索,不必精确)工作区,需要定位的图标
将background-position、width、height依次获取,转换为对应的rem,贴入自己的项目css

4.为了方便px与rem快速切换,在vscode中,可以搜索并安装 px to rem
通过安装后,插件的设置,填写基础font-size大小,在css表中,通过光标选择与键盘alt+z对px或rem,进行快速切换

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。