-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
需要和flexble.js一起使用,怎样自己维护一份vux还能保持更新 #1796
Comments
会很麻烦。你可以说说你的具体需求,看看能否直接在 vux 源码来支持。 |
我想要实现视图自适应屏幕尺寸,目前想要采取的方案是淘宝的flexible.js(https://github.com/amfe/lib-flexible),但是在使用过程中发现,把px转化为rem的时候把vux的px转化成了rem(使用px2rem),这样造成的问题是:1.没能避免不需要转化的(比如:border:1px solid #000;中的1px);2.我们的设计图是750px的,而vux好像是375px,这也造成了转化结果不是想要的; |
补充:js计算的也无法转化为rem,这样在如弹窗组件中会出现部分单位是px,部分单位是rem,结果造成视图有点错乱 |
可否建个应用 flexible 的基础 repo,并能重现上面的问题,我来尝试在 vux 或者 vux-loader 里支持。 |
可以 |
flexible.js的适配是会判断iphone端drp,然后设置viewport,而安卓端统一设置为1。vux的样式用的是px,导致在iphone会被缩小,而在安卓就没问题。 |
是的,这两天有点忙,我接下来尽快弄一个能重现问题的rp |
目前的处理方法是将vux组件中px转化为PX,避免被转成rem 如果引入了1px的话,还要做些特殊处理 目前我是这么搞得,可以参考下
转换rem使用的是postcss-plugin-px2rem,当然 postcss-px2rem 也可以
|
搞了一个简单的重现:git@github.com:54leibo/54leibo.github.com.git |
vux的ui是基于weui的,而weui本身并没有使用rem (why) 如果全局转rem的话,会使组件大小位置不正确,所以上面采用的是组件和页面分开处理 你那个demo,我跑了下,font-size都变成0了,原因未知 你上面说的没转成功的,我猜可能是less文件没转换 |
之前是loader出了点问题,现在已经修复;我先研究下你目前给出的解决方案 |
after-less-parser、style-parser这两个是在哪里配置的呢 |
vux-loader里面 |
可以按照如下方式兼容VUX和手淘flexible适配方案: if (!i && !j) {
//将p直接置为false,这样缩放比例都为1,dpr也都设置为了1
let p = false,
q = a.devicePixelRatio;
i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
} |
同样遇到这个问题 楼上哪个方案可行? |
同样遇到这个问题,求可行方案 |
一样遇到了这个问题=。=,求可行方案。或者暂时的替代方案。 |
同样遇到这个问题 目前使用的是上面贴出的after-less-parser的方案 但是要注意 那段代码有2个地方写的有问题 就是/vux/components那段 要改成vux/components 因为我把路径打印出来发现前面是@vux这种格式 |
原来是使用的cnpm导致vux路径变化哦,cnpm会导致一些不可期的问题,还是使用yarn吧 |
对于上面几位寻求解决方案的,方案已经给出了,为什么不自己尝试一下呢? |
@wg5945 感谢 目前正在尝试整合你的方案 good |
@wg5945 我也正好遇到这个问题,但是觉得好像上边方案不解决问题啊。首先flexble.js会根据不同dpr缩放整个页面,让border保持1像素,如果禁掉这个缩放那flexble就不好用一半。如果保持页面缩放,那vux就算px不转rem,那别的元素按750缩放正常看,vux按375的大小缩放小一半,还是存在问题。 |
@525729985 没太明白你的意思 其实上面的最终结果就是: |
我现在是这样使用的 |
上面几位使用flexible做适配的遇到这么多问题,为什么就不尝试用固定尺寸做适配么? <meta name="viewport" content="width=375,user-scalable=no"> 设计图是多少写多少就行了,没那多转来转去的,到最后效果还是一样,已在项目中使用快一年了 |
@agileago 你这个方案我也用了有2年了 不过我是设置成640的 你这个375其实是有问题的(隐约记得在6P下好像是有点问题) 不过其实大部分场景下都不会有问题 简单粗暴 但是还是有一些特殊情况没有rem好处理 有一些情况下viewport缩放会导致元素有点糊 其实早期大家都是用这个来做适配的(包括天猫) rem的出现就是为了解决viewport解决不了的问题(也是天猫提出这个方案的)而且现在webpack很方便 用postcss平时设计图是多少我们也写多少 都是插件自动转的 所以一般都不使用viewport的方案了 |
@RenShine 还好吧,暂时没发现有什么问题,除了横竖屏切换的时候有时候没有正常切过来到时页面变得很大(这个加个监听事件重置一下就解决了),现在荔枝fm还在用 http://m.lizhi.fm ,设置成375或者640看你的设计图了,我以前也是用rem的方案,主要那个时候大家都吹嘘着移动端要用rem,稀里糊涂的就用了,然后使用了之后团队很多人就说这东西还得再转一下,并且当时有的人的设计图是320,还有的人是375的,导致一些人觉得这玩意挺麻烦的(有些小项目是不用webpack的,比如有的人只写css),后来发现viewport的方案更简单也没什么大的问题,然后大家都喜欢用,其实viewport比较不好的一点就是不能设置字体在每个分辨率下显示一样大小,而rem就可以 a {
margin-top: px2rem(120);
font-size: 14px;
} 这是我觉得他唯一的优点吧 |
@agileago 设置viewport为固定宽度在很多那些不需要webpack的场景下肯定是OK的 不过问题是有的。 一个就是不能使用媒体查询 第二个就是1px边框的问题(时间太久了这一点存疑,但是媒体查询肯定是没法用的) |
原来那么多人用flexble.js阿, 我说下我的几个项目睬的坑后用的方案吧。
安装postcss-px2rem
最后要加个公用方法
你要在js里用px 都要用这个方法来转变 注意:
有空开个git放上去 |
flexible又来了 2.0版本 |
我的情况是这样的,用的手淘rem,我的px转rem是用的(github.com/flashlizi/cssrem)插件,并没有使用postcss-px2rem插件,所以不存在所有的px被转换为rem。只有我自己的样式被转换为了rem,现在vux的组件在项目中显示的非常小,请问如何修改可以使用rem + vux? |
@xiaolongyuan |
@moahmn |
@wg5945 关键是2.0使用方式让人有点摸不着头脑 amfe/lib-flexible#159 |
这我倒没发现,按照他的教程一步步做就好了,在ios和支持的android手机上适配都很完美 |
@wg5945 你竟然成功了 我整合后 VUX有问题 vw 单位转换倒是没问题 能帮我看看? vue-loader.conf.js
webpack.base.conf.js
|
@wg5945 我能直接采用你上面的方案?我发现按照上面的配置(没用postcss-px2rem转换,我自己在编辑器里转的,所以也不存在说vux的组件样式px被转换为rem)后组件还是比正常的转换rem的元素小很多 目前也实现了px转换为PX但是组件还是很小 |
@xiaolongyuan |
@moahmn |
@wg5945 大大说的是vux里边的px转为PX,即避免了插件的px2rem,但其实flexibox的精髓即是根据dpr去缩放页面,即动态设置meta,所以就算是vux里的组件没被转换也会被缩放。现在已知的解决方案是默认设置meta,dpr为1,但感觉这样并不优雅,因为适配的字体方案也是根据dpr设置的 |
各位大神,有没有完整的解决方案,求助!我发现vux的组件转换合适后,边框和字体缩放就发生了变化。该如何解决,求助大神! |
看了下flexible的源码 下面是flexible的部分源码 手动设置下meta头就可以不根据IOS 2/3倍屏去缩放 |
如果不用rem,移动端大家都是用什么做适配的呢?还可以很好的配合这些UI框架? |
https://github.com/callmepinggege/vux-lib-flexible 结合上述大神的方案 自己实现了一套 大家可以直接用 |
用网易的解决方案 |
@RenShine 你说的定宽问题今天被我遇到了,果然是在PLUS上面有问题,这个问题是,当页面是整屏滚动的时候,并且页面的长度在1000px以内,然后你做了个弹窗,滚动了滚动条,这个弹窗上面的按钮的触发区域就上移了 我实在模拟器模拟的,弹窗的位置上移了,但显示还是正常的,真的让人很无语,你那边有没有啥好的解决方案 |
@moahmn 我也遇到了同样的组件很小的问题。请问你解决了么? |
中括号meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"中括号 在head中加入这个meta就行了。这是我目前的做法。但手淘的font-dpr那个宏就不起作用了,因为现在的dpr被永久设置为1了。字体的设置我还是使用px,你也可以使用rem做单位虽然说作者是不推荐的,但是我看网易移动端也用rem做字体的单位,你可以参考下。 |
@moahmn dpr被永久设置为1对什么东西会有影响呢? |
@54leibo 请问阉割掉了flexible.js中根据dpr缩放的功能,会对什么东西会有影响呢? |
我需要和flexble.js结合使用,框架中的px被转后出现了问题,所以现在想要自己维护一份,是需要这样吗:改动vux源码=》发布一个npm包=》安装使用
如果改动频繁需要不断发布npm包,好像会很麻烦,有更好的方式做这件事情吗
The text was updated successfully, but these errors were encountered: