zhilizhili-ui 给人人带来一个如今最新版本的ie8计划

特征

• flexbox部份功用

• vw

• vh

• calc部份功用

• angular1.4

todo

avalon是由于没法和polyfill.js调和共处 没法运用flexbox 真惋惜

webcomponent 没法在ie8 ie9上运用 也就没法处理这些题目了 不过cordova处理计划里会有

flexbox

flexbox 我运用的是 flexibility.js github地点 作为兼容计划
那末作为一款疾速开辟的计划 emmet 处理计划也是会有的

我举个例子

假如想要运用一个flex row layout
就能够直接在sublime中输入zen-flex-row 变成预设语句 .layout.flex.horizontal>.layout__item*
再变成相应html代码
webcomponents 版本不太一样 详细今后文章给出计划

注重

不过注重的是flexibility 没法准确盘算外部长度
justify-content 悉数属性能够经由过程测试

为何没撑满 由于设置了高度
ie8 ie9测试截图 一样结果 不反复截图

align-items 悉数属性能够测试经由过程

这里再说一下 一个注重点 flex规划item是height撑满的 不是100% 注重结果一样罢了 假如你对item设置过高度就会按你设置的高度盘算 就算align-items:stretch没用

vw vh

实在厥后我发明 我完成的和vw vh写法上有些差别 不过规范写法 也会完成的
这里我要说说设想师 和 前端之间的合营题目

平常 我们在写pc端相应式规划的时刻 都喜好确认一个基准规划 比方1920 高度在pc端不定 实在没啥说的 我个人也不引荐vh 不过照样要支撑的

初期固定式设想 人人都喜好一种960的规划 人人都懂就不上图了
为何是960呢 由于这时刻的屏幕都在1024 1366摆布
厥后 1920 涌现了 就如许

然后你的老板看到了

所以这时刻平常设想师就改成了如许 平常是1200 为何是1200 由于另有1440这类屏幕啊

这时刻人人平常的做法是零丁的写一套css 末了在剖析剖析将 反复能够运用的提取出来

这是准确的 不过我要说的是 关于如许的web app呢 是不是有种哭的打动 不要说用100% 一起继续下去 烦死了

平常这里有两种做法rem vw 不过vw更简朴些 别的能够许多强人没有注重到 bootstrap 很早就供应了一个

这个我今后说到手机端优化规划的时刻会说

media 这个确实就是在特定条件下触发 用于替换款式
不过rem vw这类单元能够无损顺应屏幕拉伸 变大 rem要做点兼容 也是能够的

media query是用来做断点查询的 这点很主要

pc端vw大概是个什么模样

ie8浏览器在放大时刻会有4px的边 所以最大化时会有些差别

怎样去完成ie8下的vw支撑了 起首要猎取屏幕的宽高
不过值得注重的是起首要收集到浏览器的滚动条宽度

当body元素未加载时到场

window.documentElementclientWidthWithScrollBar = document.documentElement.clientWidth;

当body元素加载完成时 document的宽度会有所转变 body和html都为100%的宽度
这就申明不会含有滚动条宽度 所以在pc端vw和100%结果是不太一样的 这个我背面会一致一个dw单元

window.scrollBarWidth = window.documentElementclientWidthWithScrollBar - document.documentElement.clientWidth;

背面我们就能够获得滚动条的宽度

要说这个完成的要领 我们要用sass或许postcss之类款式预处理东西

起首说说页面上js和css的怎样通信 起首我们肯定一下通信花样 json
sass 能够讲map变成json SassyJSON github链接

然后怎样将字符串安排到页面上呢 我们晓得浏览器在剖析css时会把一些不合法的属性给抛弃
不过有哪两个属性破例 content font-family 个中font-family兼容性最好

这时刻我们在页面上布置一个meta标签

<meta name="support-vw-vh" content="no">

head里的标签也能够接收font-family属性

var content = window.getComputedStyle(
    document.querySelector('meta[name="support-vw-vh"]')
).fontFamily.replace(/\\/g, "").replace(/'/g, '')
content = content.slice(1, content.length - 1);

var parseobj = {};

try {
    parseobj = new Function('return (' + content + ');')();
} catch (e) {
    console.log("vw vh:没有什么要兼容的 intersting");
    return false;
}

运用getComputedStyle能够获得标签剖析后的style 不过要恢复转义

ie8没有getComputedStyle 所以我们要本身写

!('getComputedStyle' in this) && (this.getComputedStyle = (function () {
    function getPixelSize(element, style, property, fontSize) {
        var
            sizeWithSuffix = style[property],
            size = parseFloat(sizeWithSuffix),
            suffix = sizeWithSuffix.split(/\d/)[0],
            rootSize;

        fontSize = fontSize != null ? fontSize : /%|em/.test(suffix) && element.parentElement ? getPixelSize(element.parentElement, element.parentElement.currentStyle, 'fontSize', null) : 16;
        rootSize = property == 'fontSize' ? fontSize : /width/i.test(property) ? element.clientWidth : element.clientHeight;

        return (suffix == 'em') ? size * fontSize : (suffix == 'in') ? size * 96 : (suffix == 'pt') ? size * 96 / 72 : (suffix == '%') ? size / 100 * rootSize : size;
    }

    function setShortStyleProperty(style, property) {
        var
            borderSuffix = property == 'border' ? 'Width' : '',
            t = property + 'Top' + borderSuffix,
            r = property + 'Right' + borderSuffix,
            b = property + 'Bottom' + borderSuffix,
            l = property + 'Left' + borderSuffix;

        style[property] = (style[t] == style[r] == style[b] == style[l] ? [style[t]]
            : style[t] == style[b] && style[l] == style[r] ? [style[t], style[r]]
            : style[l] == style[r] ? [style[t], style[r], style[b]]
            : [style[t], style[r], style[b], style[l]]).join(' ');
    }

    function CSSStyleDeclaration(element) {
        var
            currentStyle = element.currentStyle,
            style = this,
            fontSize = getPixelSize(element, currentStyle, 'fontSize', null);

        for (property in currentStyle) {
            if (/width|height|margin.|padding.|border.+W/.test(property) && style[property] !== 'auto') {
                style[property] = getPixelSize(element, currentStyle, property, fontSize) + 'px';
            } else if (property === 'styleFloat') {
                style['float'] = currentStyle[property];
            } else {
                style[property] = currentStyle[property];
            }
        }

        setShortStyleProperty(style, 'margin');
        setShortStyleProperty(style, 'padding');
        setShortStyleProperty(style, 'border');

        style.fontSize = fontSize + 'px';

        return style;
    }

    CSSStyleDeclaration.prototype = {
        constructor: CSSStyleDeclaration,
        getPropertyPriority: function () {},
        getPropertyValue: function ( prop ) {
            return this[prop] || '';
        },
        item: function () {},
        removeProperty: function () {},
        setProperty: function () {},
        getPropertyCSSValue: function () {}
    };

    function getComputedStyle(element) {
        return new CSSStyleDeclaration(element);
    }

    return getComputedStyle;
})(this));

中心算法以下 详细是什么 我项目里看就是了

    function cal(propval) {
        if (typeof propval != "string") {
            return propval;
        }

        if (propval.indexOf('vw') > -1) {
            return viewportwidth * rel(propval, "vw") / 100 + "px";
        } else if (propval.indexOf('vh') > -1) {
            return viewportheight * rel(propval, "vh") / 100 + "px";
        } else {
            return propval;
        }
    }

怎样找到我们安排的style呢 起首是不能够经由过程document.styleSheets[index]体式格局直接猎取的
由于你没法晓得她在页面中处于styleSheets哪一个部份 那末能够写innerHTML吗 ie8不支撑head中style写innerHTML ie的CSSStyleSheet有一个owningElement属性 其他能够有owningNode属性 所以能够轮回找具有对应id的styleSheets了

    var sheet = false;

    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].owningElement.id == id) {
            sheet = document.styleSheets[i];
        }
    }

calc

calc 的完成体式格局实在和vw vh差不多 就不多说了
不过值得注重的是 calc(100% – $unit)的完成不是那末圆满 fallback要做好

这里说说运用

最常见的8格grid 自带

要兼容到ie8

自顺应宽度变化 实在没啥必要 然则我们有vw这个单元 用啊

起首说下道理

起首是代码 由于要兼容 必需多一层container

<div class="polyfill-grid-container">
    <div class="layout full-width ui-collection polyfill-grid">
        <div class="layout__item">1</div>
        <div class="layout__item">2</div>
        <div class="layout__item">3</div>
        <div class="layout__item">4</div>
        <div class="layout__item">5</div>
        <div class="layout__item">6</div>
    </div>
</div>    

1. 起首我们为每一个layout__item加上margin-top margin-left
   

2. 这时刻我们要去除1 ~ 4上的margin-top

@for $i from 1 through ($numrow - 1) {
    $ret: "";
            $ret: $basesel + str-repeat(" + .layout__item", $i);
            #{$ret} {
                margin-top: 0;
            }
}
        $ret: str-repeat(" + .layout__item", $numrow);
        #{$ret} {
            @include polyfill-advance-set((
                margin-top: $gutter #vw
            ));
        }        

这里我们说下 ie8 能够运用 :first-child + $class == nth-child(2)
+ $class 实际上就是 nth-child(n+2) 人人本身体会下

1. 如今我们只要用一个container挡住 就能够了
   

angular

起首 avalon 是不错的能够兼容到ie8的计划 不过没法和flexbox兼容计划并存 这也挺遗憾的
不过此次带来的angular的版本是1.4 github地点

本文项目地点

这是一个能够运用的项目 能够在ie8 ie9上运转
github地点