search

fex-team / fis-spriter-csssprites

csssprite
88 stars 37 forks source link

background-size 单位可否支持rem #19

Open gavinning opened 9 years ago

gavinning commented 9 years ago

移动场景有些会基于rem为单位做设计，而非px，这时候可能是： .foo{ background-image: url(1.png); background-size: 1rem 1.5rem; } 使用csssprites的时候发现rem是不被支持的，未来是否会提供支持

udbmnm commented 9 years ago

我靠，我也发现这个问题，背景图片是固定的大小，如果才能写rem呢？rem是个变化的相对值

oxUnd commented 9 years ago

其实我整移动端开发少，所以想确认一个问题；

udbmnm commented 9 years ago

1rem默认是16px，大小根据根节点来计算的，比如html { font-size: 20px }那么1rem就是20px了，一般页面不同屏幕宽度设置根节点大小不一样，屏幕宽度不同定位的坐标是一样的，只是转换成的rem不一样了

gavinning commented 9 years ago

计算位置信息的时候可以先根据一个相对值把rem转换为px，计算完毕再根据之前的相对值转换为rem， 基本可以解决问题，rem相对px是一个可变的值，但是rem在css文件中实际是一个固定值，这个相对值可以在csssprites里进行设置。

场景1，iPhone5，1rem = 100px .foo{ width: 1rem; }

场景2，iPhone6，1rem = 110px; .foo{ width: 1rem; }

场景N....

在不同的屏幕场景下，根据算法计算出来的rem可能不是一个固定的px值，但在样式中的表现实际是一个固定的rem值。不知道这么描述是否能够明白

oxUnd commented 9 years ago

赞，看来这个问题是可以解决的，等我下月初实现一下。

gavinning commented 9 years ago

大赞！这么好的功能在rem场景不能用实在太遗憾！期待新版本~

w2230030100 commented 9 years ago

@udbmnm 如果html设置为html{font-size:62.5%} 那么1rem等于少px呢

lococo--0 commented 8 years ago

@xiangshouding 这个功能最后有实现么，需要传什么样的config？

lococo--0 commented 8 years ago

@xiangshouding @2betop 刚刚看了下源码里面的defaultConfig，好像没有涉及到rem的相关配置， 能否加一个如下配置的识别

fis.plugin('csssprites',  {
    remUnit: 75
})

当遇到rem单位时，数值乘以remUnit的值便是对应的px值 最后生成的px再除以remUnit转为rem单位

maxming2333 commented 8 years ago

其实 rem 方案，在别的插件已经实现了

传送门

但是这个插件最新的一个版本误删了代码，

于是有同事提了一个 pr https://github.com/mudoo/fis-spriter-csssprites-group/pull/2/files

作者不予理会，于是我们在自己私库里面创建了一个临时的npm模块

我们提 issue 的原则是希望维护者能 fixbug 或者 feature， 尽量把你想要的实现通过PR去提交，不能一味滴做伸手党 但是如果着急用，不防自己先弄一个模块 如果大家喜欢 fis，就尽量去了解他，多看看码源

lococo--0 commented 8 years ago

@maxming2333 赞！ 不过为毛我在github里面搜fis-spriter-csssprites-group，没有任何结果

maxming2333 commented 8 years ago

@lococo--0 直接去npmjs里面搜

oxUnd commented 8 years ago

提个 PR 啊

hqqxxf commented 7 years ago

现在支持了吗？急求