flexible随笔

作者: classic_ | 来源:发表于2016-12-19 20:11 被阅读71次

    1.什么是flexible?

    flexible是responsive的低端形态和基础。直观来说,在任何宽度的屏幕上,网页显示不会两边留白,相当于PC端的流体布局,两者的区别在于,流体布局的表现角度在于实现,flexible的表现角度注重结果。

    网页的设计常用的后两种方式:

    • response design:响应式设计
    • adaptive design:适应型设计

    关于像素的几个概念

    • PPI(单位英寸像素):在一英寸内的像素数,此像素的大小决定了屏幕的显示质量
    • Dpr(设备的像素比率):设备像素与css像素之间的比例,即一个设备像素中显示多少个css像素

    物理像素:显示屏的最佳分辨率,即屏幕实际存在的像素行数乘以列数的数学表达式,是显示屏固有的参数,不能调节,其含义是指显示屏最高可显示的像素数。单位:px

    逻辑像素:在不同大小的屏幕中 逻辑像素不同,可以根据需要来设定多少倍的px,如:1pt=4px

    Retina屏:Retina是一种显示技术,可以将更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。最初该技术用于Moto Aura上,通常这种分辨率在正常观看距离下无法使肉眼分辨其中的显像单元,也 称为视网膜显示屏。

    2.lib-flexbile

    • lib-flexible是用来适配屏幕的开源库,可以直接使用阿里CDN:
      <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    • lib-flexible库的使用方法:在<header></header>中添加对应的flexible_css.js,flexible.js文件

    • 此处应当使用内联js,在执行js后,会在<html>元素上增加一个data-dpr属性,以及一个 font-size样式,js会根据不同的设备添加不同的data-dpr值,同时会给html加上对应的 font-size的值,因此,需要在所有资源加载之前执行这个js。页面中的所用元素都可以通过rem单位来设置

    • 在引入lib-flexible需要执行的js之前,可以手动设置meta来控制 dpr值,如:

    <meta name="flexible" content="initial-dpr=2" />
    

    其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr后,不管设备是多少dpr,都会强制使用手动设置的值。

    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;
    }
    

    js做了这么几件事:

    1.动态改写<meta>标签
    2.给<meta>元素添加data-dpr属性,并且动态改写data-dpr的值
    3.<html>元素添加font-size属性,并且动态改写font-size的值

    • 字号一般不用rem
      现在绝大多数的字体文本都是自带一些点阵尺寸,通常是16px24px,所以我们不希望出现一些小数尺寸
      flexible整个适配方案中,考虑文本还是使用px作为单位,只不过使用[data-dpr]属性来区分dpr下文本字号的大小
    div { 
        width: 1rem; 
        height: 0.4rem; 
        font-size: 12px; // 默认写上dpr为1的fontSize
    }
    [data-dpr="2"] div {
        font-size: 24px;
    }
    [data-dpr="3"] div {
        font-size: 36px;
    }
    

    相关文章

      网友评论

      • 陈小窝:此处应当使用内联js,这是什么意思,还有那个mate标签要写还是不要写?
        classic_:內联就是将js写在head里面 外联是引用js mate标签和他们没有关系
      • 阳光之城alt:我用了怎么感觉 好像不一样 比如设计图750 图片720 左右各15px 这样写了之后 发现手机端可以支持显示 ipad上显示的宽度 就不对了 还只有750的宽度 不是满屏的
        classic_:@阳光之城_a50f
        (function(window){
        var winW = document.documentElement.clientWidth || document.body.clientWidth;
        document.documentElement.style.fontSize = winW / 10 + "px";
        window.onresize = function(){
        var winW = document.documentElement.clientWidth || document.body.clientWidth;
        document.documentElement.style.fontSize = winW / 10 + "px";
        }
        })(window)
        阳光之城alt:@classic_ 可以啊 感激不尽 :smile:
        classic_:一般移动端用rem布局啊 根据屏幕的宽度设置根目录字体的大小,通用rem动态调节尺寸,适配手机你是用px还是rem?我这有段适配屏幕大小的代码,需要告诉我一下;一般来说 手机屏幕的宽高比是一定的,ipad的宽高比不一样,得通过媒体查询单独设置样式。

      本文标题:flexible随笔

      本文链接:https://www.haomeiwen.com/subject/xdstvttx.html