amfe / lib-flexible Goto Github PK
View Code? Open in Web Editor NEW可伸缩布局方案
可伸缩布局方案
场景:
我可能有个li列表,每个列表项的布局是相同的,只是文字差异,我完成了一个的时候 字体设置都没有问题。但是当我copy这个布局重复写入到页面里后,页面里所有的文字字号都变大了。
这是什么引起的? 我排查了dom和样式都没感觉是因为布局或样式导致的。求大神帮忙排查下。
以下代码:
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
如此设计的原理是什么呢?
我的一点理解就是将设备的宽度 分割为16等分,那么,我测试了下 document.documentElement.getBoundingClientRect().width在wp手机上获取的是1024,不知道是是不支持这个反人类的浏览器么?还是需要一些特殊的处理
为什么使用了seajs加载flexbox后,body的font-size没有了?
想问一下为什么针对所有的非 iPhone 设备都用了 dpr = 1 的方案呢?
有些疑惑,有的 Android 设备的 devicePixelRatio 其实不也是会有不少非 1 的情况吗?
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
RT
看过了源码和index.html
这个demo文件.
分析出大概思路是:
根据传入的列宽, 列间距, 边距, 最小单位等参数, 来动态设定栅格
<style>
拿750-12
的举例, 得到如下公式:
12 * 7(列宽) + 11 * 3(列间距) + 2 * 4(边距) = 125a = 750 / 6(最小单位px)
12x + 11y + 2z = 750 / u
看到x, y, z, u
4个变量;
如果来拼凑的话, 这4个变量是非常难都凑成整数的; 如 6,4,17,5 , 这样的数字其实很尴尬....边距太大了...:joy:
想知道最初你们是如何得到这样的数字组合~~ 😆
如题,我字体大小用了rem,也没发现什么问题。
分2种,A:栅格对不齐,B:错位。
A:小米1/系统4.4/UC;魅族MX2/QQ、UC;HTC/系统2.3/UC
B:魅族MX2/自带浏览器;HTC/系统2.3/QQ
在viewport里面加入"shrink-to-fit=no", 是否可以不强制dpr为1?
我发现,在android的UC浏览器下,如果旋转屏幕后(特别是从横屏转为竖屏),flexible的js确实已经正确执行并正确设置了根元素的font-size,但是页面的所有以rem为单位的元素尺寸并没有根据新的基准像素进行设置(重绘?),从而导致元素显示的还是原来的尺寸。
同时页面元素的样式定义方式我都尽量参照淘宝首页的样式进行设置(例如每个元素都定义了宽高和大部分都使用了box-sizing属性。)
而恰恰手机淘宝的首页却可以正确处理这种屏幕旋转问题。望能得到解答。
ps:wp的ie浏览器和uc在旋转屏幕后,有小部分特定元素也会出现上述情况。
为什么宽度不能大于540,为什么去540,其他值是否可以?
如题,在安卓下设置缩放比例始终为1倍,为什么要采取这种策略呢?
如果安卓下某设备的 devicePixelRatio 是2 或 3 呢?
2016年01月13日的源码在哪?
目前遇到页面在做适配的时候,三星Galaxy S6 edget+ 两边留有空白,rem750之后,不能沾满100%屏幕
window['lib']代表什么
根据实际的测试结果及源代码中maximum-dpr的逻辑,maximum-dpr并没有比较系统dpr,不知道为什么会在readme里面有这样的解释呢?
https://github.com/amfe/lib-flexible/blob/master/src/flexible.js#L28
iOS input type = radio scale 选中样式不能看,有啥解决方案么?
为什么不建议字体使用rem,字体使用rem会照成什么问题吗?并且为什么不直接将设计稿的尺寸除以100,并通过计算相应的根font-size来达到同样的效果呢?
比如我在项目里已经用了 normalize.css
,可以不再引入 flexible.less 里的内容吗?还是会有其它影响?
关于字体如何做屏幕适配,我有三个问题:
设计那边给了一个640的稿子(5S),如果标注字体是20px,那么在5S这种dpr为2的屏幕上,我应该设置字体为20是吧,然后6P这种dpr为3的稿子上,按照比例应该是30px是吧,然后一般的安卓机设置字体为10px是吧,但是由于webkit内核最小字体12的限制,最后渲染出来是12px对吧?
贵公司的设计那边在640的稿子上给出的最小字体是多少呢,因为我发现20px的字体在5S上这种高清屏幕上太小了,不知道你们是如何处理的。
之前看过大漠的一篇文章,讲了使用saas的混合宏来定义字体比较方便:
`@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}`
但是在less上如何写出这种混合宏呢,我还没有思路。
谢谢。
没有用的时候 过度执行的很好 加上就突然间中断了...
获取视口的宽度和dpr都是正确的。页面的右边却出现一大段空白,怀疑是rem出问题了
比如我们切图按照750来切的。
那么我们的
font-size计算:
var c;
var b = f.getBoundingClientRect().width;
b / i > 540 && (b = 540 * i);
var my=750; //切图按照750计算,就写750,640计算就写640
if(b==my){ //分辨率=我们切图,直接定死100,或者其他,这里写100,为了好计算rem
c=100;
}
else{
c=b/my*100; //其他分辨率的font-size就这样计算
}
这样做后,我们按照750的切图标注来布局,就方便计算rem了,比如
100px: 100/100=1rem
230px : 230/100=2.3rem
若按照源代码的话:230px: 230/75=3.066667rem 不好计算
请问这种做法是否会有其他问题? 谢谢
用 vw 为单位做适配看上去相当完美,也非常简单,由 flexible 迁移过去也很简单,现在微信的 x5 内核也支持了。唯一的缺点就是至少需要 安卓 4.4。所以以后这个 flexible 会考虑使用 vw 代替吗?
在iphone5s等高清屏上,dpr为2, scale为0.5。发现有些横向的border, 如border-bottom, border-top定义为1px的时候, 会渲染出不一样的大小,滑动屏幕的时候border也会出现闪烁现象。
如题。不知道大家有没有遇到过。我这里频率还比较高,看起来是字号出问题。一般情况下重启浏览器会好。
请教一下,我想使用lib.flexible的接口,但在目前淘宝提供的flexible链接上http://g.tbcdn.cn/mtb/lib-flexible/0.2.3/??flexible_css.js,flexible.js ,代码和github上的不太一样,没有提供lib.flexible这些接口,请问这是为什么,如果想用这些接口怎么办呢?
在refreshRem
中:
if (width / dpr > 540) {
width = 540 * dpr;
}
意义是什么?540是哪里来的?
看到 #12 也是这样的问题。
最后为什么要给body设置font-size
?我去掉了,似乎也没有什么影响。
之前没用过,只是看源码的时候有点不明白。希望赐教。
有两个疑问,求大神解答,为啥要分成10a,1rem=75有啥用,还有为啥把安卓置成dpr1,安卓那么多2和3的
看了下flexible_css.debug.js里动态插入的样式表内容与flexible.debug.css相同,
那么页面引入flexible_css.debug.js与引入flexible.debug.css有什么区别吗?
假如我的设计稿是640,字体大小是28点,那么我可以设置 body { font-size: 28 / 64 rem }
,这样在iPhone4,5最终大小会是14px
,在iPhone6最终大小会是16px(16.40625)
,在iPhone6 plus最终大小会是18px(18.1125)
,在一些deviceWidth 360px的安卓机会是15px
这样不是更灵活吗?就是有点疑惑,为什么字体不用rem呢?
在尝试使用flexible之后发现非常好用。但是在有些项目中,不希望页面支持横竖屏切换。请问,这要怎么办?
很感谢阁下分享的这套解决方案.
对于阁下的观点,在Resolution的适配中 , 使用rem进行layout. :
- 对于320宽度来设计的视觉稿,只需要把视觉稿上的尺寸除以20,即可得出rem单位的数值。如果是以640宽度来设计的视觉稿,则除以40即可,依次类推.
对于整个重构跟计算过程中, 因为频繁地将设计稿的尺寸除以40, 感觉效率会受影响. 当然, 阁下的团队也许用一些类似sass的预处理来进行编译.
工具可以解决问题, 使用工具集实现自动化处理也是我推崇的, 但是如果能不使用, 有时也更加高效.
下面是我的想法:
- 改成"文档宽度除以64作为文档的字体大小, 这样的话, 那对于640宽度的设计稿, 我们就把设计稿上的尺寸除以10, 除以10的计算过程相对快捷, 甚至可以直接口算".
- 约定成俗, 既然layout都是缩放的样式而且考虑到retina, 所以设计稿最好规定都按640来设计. 这样就减少人力沟通成本,提高开发效率.
如题,不是很明白
ios上页面正常。。相同代码到了 安卓 都放大了
背景:刚开发完的时候是好的,过了大概1个多月就陆续开始出现这个问题。与此问题相关的情况有2点:
1 小米手机升级过后就出现这种情况
2 经常访问(1个月以上)该网站的手机几乎都有这个问题,第一次访问的安卓手机就没有
用了flexible后,在小米手机上弹出键盘后,缩放比例会重新计算一次,导致布局发生变化。是否可以只计算一次缩放比例,或者有没有别的解决办法。另外在华为手机上上下移动屏幕都会重新计算缩放比例,导致布局变化,是否有解决办法
div中的font-size使用了px来设置,为什么在body中还是设置font-size,看不懂这个地方。
RT,昨天遇到 Android 下,如果使用 小数的 scale,在部分浏览器样式错乱,今天改淘宝的写法,没问题了
OS 9_3遇到什么坑呢,能详细说说么
viewport 的缩放比值 initial-scale=1= 0.5 在android 上没有兼容问题? 我看到很多文章介绍,android 机器上这个属性简直有大大的兼容问题
如题
其他dpr也是有2,3,之类的?
设计稿42像素除以基准font-size:36 得到1.16rem 但是在webapp里 实际上看起来要比设计稿宽很多
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.