Git Product home page Git Product logo

lib-flexible's Introduction

amfe-flexible

Classic edition (0.3.2)

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。

Usage

Install

npm i -S amfe-flexible

Import

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

You can inline this file with inline-source.

Develop

Use postcss-adaptive.

License

(The MIT License)

Copyright (c) 2016 Alibaba MFE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

lib-flexible's People

Contributors

airen avatar mingelz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lib-flexible's Issues

关于非 iOS 设备的 dpr 疑惑

想问一下为什么针对所有的非 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;
    }

对栅栏系统的一点疑问

看过了源码和index.html这个demo文件.

分析出大概思路是:

根据传入的列宽, 列间距, 边距, 最小单位等参数, 来动态设定栅格<style>

750-12的举例, 得到如下公式:

12 * 7(列宽) + 11 * 3(列间距) + 2 * 4(边距) = 125a = 750 / 6(最小单位px)
12x + 11y + 2z = 750 / u

看到x, y, z, u4个变量;
如果来拼凑的话, 这4个变量是非常难都凑成整数的; 如 6,4,17,5 , 这样的数字其实很尴尬....边距太大了...:joy:

想知道最初你们是如何得到这样的数字组合~~ 😆

安卓微信上大量出现发大现象

ios上页面正常。。相同代码到了 安卓 都放大了
背景:刚开发完的时候是好的,过了大概1个多月就陆续开始出现这个问题。与此问题相关的情况有2点:
1 小米手机升级过后就出现这种情况
2 经常访问(1个月以上)该网站的手机几乎都有这个问题,第一次访问的安卓手机就没有

关于flexible_css.debug.js的问题

看了下flexible_css.debug.js里动态插入的样式表内容与flexible.debug.css相同,
那么页面引入flexible_css.debug.js与引入flexible.debug.css有什么区别吗?

以后这个 flexible 会考虑使用 vw 代替吗?

用 vw 为单位做适配看上去相当完美,也非常简单,由 flexible 迁移过去也很简单,现在微信的 x5 内核也支持了。唯一的缺点就是至少需要 安卓 4.4。所以以后这个 flexible 会考虑使用 vw 代替吗?

关于字体做适配的问题

关于字体如何做屏幕适配,我有三个问题:

  • 设计那边给了一个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上如何写出这种混合宏呢,我还没有思路。

谢谢。

Resolution适配的计算简化

Resolution适配的计算简化

很感谢阁下分享的这套解决方案.

对于阁下的观点,在Resolution的适配中 , 使用rem进行layout. :

  • 对于320宽度来设计的视觉稿,只需要把视觉稿上的尺寸除以20,即可得出rem单位的数值。如果是以640宽度来设计的视觉稿,则除以40即可,依次类推.

对于整个重构跟计算过程中, 因为频繁地将设计稿的尺寸除以40, 感觉效率会受影响. 当然, 阁下的团队也许用一些类似sass的预处理来进行编译.

工具可以解决问题, 使用工具集实现自动化处理也是我推崇的, 但是如果能不使用, 有时也更加高效.

下面是我的想法:

  • 改成"文档宽度除以64作为文档的字体大小, 这样的话, 那对于640宽度的设计稿, 我们就把设计稿上的尺寸除以10, 除以10的计算过程相对快捷, 甚至可以直接口算".
  • 约定成俗, 既然layout都是缩放的样式而且考虑到retina, 所以设计稿最好规定都按640来设计. 这样就减少人力沟通成本,提高开发效率.

今天看了源码 有点不明白

  1. refreshRem中:

            if (width / dpr > 540) {
                width = 540 * dpr;
            }
    

    意义是什么?540是哪里来的?
    看到 #12 也是这样的问题。

  2. 最后为什么要给body设置font-size?我去掉了,似乎也没有什么影响。

    之前没用过,只是看源码的时候有点不明白。希望赐教。

设计稿到rem转换

设计稿42像素除以基准font-size:36 得到1.16rem 但是在webapp里 实际上看起来要比设计稿宽很多

为什么字体不用rem,要根据dpr和媒体查询设置呢?

假如我的设计稿是640,字体大小是28点,那么我可以设置 body { font-size: 28 / 64 rem } ,这样在iPhone4,5最终大小会是14px,在iPhone6最终大小会是16px(16.40625),在iPhone6 plus最终大小会是18px(18.1125),在一些deviceWidth 360px的安卓机会是15px

这样不是更灵活吗?就是有点疑惑,为什么字体不用rem呢?

感觉可以按照切图来先定义好,定义为一个整数比如100,这样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 不好计算

请问这种做法是否会有其他问题? 谢谢

Android bug

分2种,A:栅格对不齐,B:错位。
A:小米1/系统4.4/UC;魅族MX2/QQ、UC;HTC/系统2.3/UC
B:魅族MX2/自带浏览器;HTC/系统2.3/QQ

布局缩放

用了flexible后,在小米手机上弹出键盘后,缩放比例会重新计算一次,导致布局发生变化。是否可以只计算一次缩放比例,或者有没有别的解决办法。另外在华为手机上上下移动屏幕都会重新计算缩放比例,导致布局变化,是否有解决办法

安卓uc浏览器屏幕旋转问题

我发现,在android的UC浏览器下,如果旋转屏幕后(特别是从横屏转为竖屏),flexible的js确实已经正确执行并正确设置了根元素的font-size,但是页面的所有以rem为单位的元素尺寸并没有根据新的基准像素进行设置(重绘?),从而导致元素显示的还是原来的尺寸。

同时页面元素的样式定义方式我都尽量参照淘宝首页的样式进行设置(例如每个元素都定义了宽高和大部分都使用了box-sizing属性。)

而恰恰手机淘宝的首页却可以正确处理这种屏幕旋转问题。望能得到解答。

ps:wp的ie浏览器和uc在旋转屏幕后,有小部分特定元素也会出现上述情况。

IOS设备上 border会渲染出不一致的结果

在iphone5s等高清屏上,dpr为2, scale为0.5。发现有些横向的border, 如border-bottom, border-top定义为1px的时候, 会渲染出不一样的大小,滑动屏幕的时候border也会出现闪烁现象。

基于lib-flexible开始过程中出现字体渲染混乱

场景:
我可能有个li列表,每个列表项的布局是相同的,只是文字差异,我完成了一个的时候 字体设置都没有问题。但是当我copy这个布局重复写入到页面里后,页面里所有的文字字号都变大了。

这是什么引起的? 我排查了dom和样式都没感觉是因为布局或样式导致的。求大神帮忙排查下。

关于在wp上的一点问题

我的一点理解就是将设备的宽度 分割为16等分,那么,我测试了下 document.documentElement.getBoundingClientRect().width在wp手机上获取的是1024,不知道是是不支持这个反人类的浏览器么?还是需要一些特殊的处理

关于三星Galaxy适配问题

目前遇到页面在做适配的时候,三星Galaxy S6 edget+ 两边留有空白,rem750之后,不能沾满100%屏幕

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.