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

问题描述

问 题

有一个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最接近的来决定的，实际操作下的确能适应多分辨率

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

感谢楼下几位答案

解决方案

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

这篇关于前端 - 请教关于H5活动切图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！