图片精灵快速定位工具

官方地址

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,进行快速切换