请教关于H5活动切图的问题

Question

有一个H5页面需要切图，如下图，背景图片我按照width: 100%就可以了

问题是，下面有个按钮，需要以图片的方式切出来，那么这个图片的width要设置多少才合适，以至于在不同分辨率的手机下能够保持一致呢？

根据提示rem找了篇文章：

关于移动端 rem 布局的一些总结

那么又出现新的问题，举个例子，这个设计稿是750px，切图是647px，在分辨率375 x 667下，按照如下样式，1rem将按照360px的区间以16px为单位，那么计算公式就是：360 / 750 * 647 / 16 = 19.41rem

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

问题：这只是计算一张按钮图片的尺寸，我花了近10分钟。。。。。有没有有效的工具，或者方法来做这件事呢？

最后采用了rem的方法，没有用JS来操作，考虑到便捷开发，CSS修改起来是最快的，效率也高
最后将公式简化成这样，算习惯就好了

0.48rem * {图片尺寸}px / 16px = {实际尺寸}rem

这里的0.48rem是从这里得来的360px / 750px * 1rem = 0.48rem
而750px则是公司H5设计规范统一750px
而360px则是采用了一个和iPhone 6屏幕尺寸375最接近的来决定的，实际操作下的确能适应多分辨率

最终得到的结果可以根据实际情况上下调整

感谢楼下几位答案

Answer 1

切原来的大小就行，width设置成rem为单位，就能够在不同手机端实现响应式了

Answer 2

这个不是切图的问题，而是做页面适配的问题。你想用百分比，可以的，你只要把切出按钮的图片宽度除以设计宽度就好了。但是这样算来算去太麻烦了，不如直接写个js，每次进入页面时将实际宽度/高度（看你准备优先适配哪个）除以设计宽度/高度得到页面缩放比，然后再缩放下页面的wrap就好。

Answer 3

暴力解法：document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 * 2 + 'px'; 设置html的根字体大小 750px的设计稿，设计稿中的100px刚好等于1rem。剩下的就是处理一下字体大小即可，字体别用rem

Answer 4

网上有一些网站可以实现在线转换，推荐一个我经常用的：http://alurk.com/