雪碧图自动适配问题

[renxj]

我发现在适配方面还是有点问题 是基于iphone6的 375尺寸 是没问题的 ，但是plus和小一点屏幕计算都有一点点失误。求解决方案

[willerce]

先确认一下微博那张图片的尺寸是否正确。

另外可以尝试改大TaskBuildDist.js#92行的 {margin: 4} 值，看看是否有效。

[renxj]

@willerce https://github.com/weixin/tmt-workflow 这个这个项目我执行gulp build_dev时

背景图片也显示不全

[littledu]

@renxj 这一个 demo 没有加移动端的 meta，所以用手机的模式看会有问题，按 PC 模式则可以，后面我加一下这个 demo 的适配。

另外，你的问题可能跟 rem 有关，可以加一个 background-repeat: no-repeat� 解决一下问题。

[renxj]

@littledu 我有自己加上移动端的meta,我在src里面写的时候用的px，是编译的时候自动换算成rem的，你们用的时候都是好的吗？

[littledu]

是的，我特意重新跑了一下，我们的 demo 没有问题，线上 http://weixin.github.io/tmt-workflow/project/dist/html/index.html 这一个也是正常的，你再看看。

至于你第一条回复那里自己的图片应用，加一个 background-repeat: no-repeat 应该就可以

[renxj]

@littledu 好的，谢谢~我再看看

[renxj]

@littledu 我知道了 因为线上的demo没有用rem，所以不会有问题，我查看了一下源代码单位是px,可能是我用了rem产生了计算的不准确导致的，是不是这样的道理？

[renxj]

我把 "supportREM": false,设为false就是正常的了。。

[littledu]

我晚点再看下

[hzlzh]

多谢反馈，你的描述已经重现，刚刚提交了 7b9fb54 作为修复

这个 icons 在 rem 单位尺寸下被切边（实际上也可能相反：漏出更多 background-repeat 部分）这个问题是因为 dev 阶段流程做了 px->rem 处理造成的。

解决办法有 2 种：（推荐方法一）
方法一：
更新最新的 tmt-workflow task， dev 阶段不做处理，仅在 dist task 里做 rem 转换。

方法二：
可以给对应 icon 的 class 样式使用一个 .rem-bgc(); 的混入函数
参看这里：
https://github.com/weixin/tmt-workflow/blob/master/project/src/css/lib-mixins.less#L337

[renxj]

@hzlzh 好的，我赶紧试试~谢谢啦

[renxj]

@hzlzh 经测试，使用方法二，执行开发任务（build_dev），生产任务（gulp build_dist）运行都没有问题，使用方法一，执行生产任务没有问题 ，执行开发任务的时候还是有问题。截图如下

[renxj]

@hzlzh 按着您的提交改了下代码，可以了 。不知道为什么更新不到最新的，谢谢啦 ~

[hzlzh]

不客气。
关于更新问题试试 github 官方客户端来更新，或者直接复制那个 task 到本地就好了。

[renxj]

@hzlzh 我又发现一个问题，是不是只有2倍图或者3倍图的时候有做background-size,1倍图的时候没有，这就造成了1倍图错乱的情况，截图如下，还有一个疑问，src的slice文件夹是不是不能用合并过的图片？

[hzlzh]

你更新流程了么，雪碧图(sprite)+rem 是没有问题的，./img + rem 需要添加下面这一组样式来保证显示正常。

.rem-bg(){
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

[hzlzh]

REM 的开启一定要配合 html 根节点 font-size root size 的设置，记得手动把此处打开
https://github.com/weixin/tmt-workflow/blob/master/project/src/css/style-index.less#L13

[renxj]

@hzlzh 我好像知道原因了 当屏幕大于400px小于375px的时候会错乱，也就是根节点font-size不等于20px的时候回有问题，您看一下是不是因为这个

[hzlzh]

是的 就是这个原因

[renxj]

@hzlzh 建议使用Flexible 代替媒体查询 参考网址为 amfe/article#17 不知道可行不可行 sprite图片适配方面确实比较麻烦

[hzlzh]

初期选方案的时候有考虑过 flexible。
你遇到的问题是因为目前 demo 代码很久没有更新，在 rem 方案的展示上有偏差，已经添加了 to-do 来更新项目范例 demo。

[renxj]

那我是再更新一下 就可以拿到最新的demo了吗？

[hzlzh]

目前还没放出更新，等更新了这里会 @ 你

[renxj]

好的 谢谢~