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

李惟
  • 2.1k

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

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

感谢楼下几位答案

回复
阅读 7.1k
4 个回答
✓ 已被采纳

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

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

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

我的邋里庄
  • 1
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏