摘要：給大家?guī)?lái)一個(gè)目前最新版本的方案特色部分功能部分功能是因?yàn)闊o(wú)法和和諧共處無(wú)法使用真可惜無(wú)法在上使用也就無(wú)法解決這些問(wèn)題了不過(guò)解決方案里會(huì)有我使用的是地址作為兼容方案那么作為一款快速開發(fā)的方案解決方案也是會(huì)有的我舉個(gè)例子如果想要使用一個(gè)就可

zhilizhili-ui 給大家?guī)?lái)一個(gè)目前最新版本的ie8方案

flexbox部分功能

vw

vh

calc部分功能

angular1.4

avalon是因?yàn)闊o(wú)法和polyfill.js和諧共處 無(wú)法使用flexbox 真可惜

webcomponent 無(wú)法在ie8 ie9上使用 也就無(wú)法解決這些問(wèn)題了 不過(guò)cordova解決方案里會(huì)有

flexbox 我使用的是 flexibility.js github地址 作為兼容方案
那么作為一款快速開發(fā)的方案 emmet 解決方案也是會(huì)有的

如果想要使用一個(gè)flex row layout
就可以直接在sublime中輸入zen-flex-row 變成預(yù)設(shè)語(yǔ)句 .layout.flex.horizontal>.layout__item*
再變成相應(yīng)html代碼
webcomponents 版本不太一樣 具體之后文章給出方案

不過(guò)注意的是flexibility 無(wú)法正確計(jì)算外部長(zhǎng)度
justify-content 全部屬性可以通過(guò)測(cè)試

為什么沒(méi)撐滿 因?yàn)樵O(shè)置了高度
ie8 ie9測(cè)試截圖 一樣效果 不重復(fù)截圖

align-items 全部屬性可以測(cè)試通過(guò)

這里再說(shuō)一下 一個(gè)注意點(diǎn) flex布局item是height撐滿的 不是100% 注意效果一樣而已 如果你對(duì)item設(shè)置過(guò)高度就會(huì)按你設(shè)置的高度計(jì)算 就算align-items:stretch沒(méi)用

其實(shí)后來(lái)我發(fā)現(xiàn) 我實(shí)現(xiàn)的和vw vh寫法上有些不同 不過(guò)標(biāo)準(zhǔn)寫法 也會(huì)實(shí)現(xiàn)的
這里我要說(shuō)說(shuō)設(shè)計(jì)師 和 前端之間的配合問(wèn)題

通常 我們?cè)趯憄c端響應(yīng)式布局的時(shí)候 都喜歡確認(rèn)一個(gè)基準(zhǔn)布局 比如1920 高度在pc端不定 其實(shí)沒(méi)啥說(shuō)的 我個(gè)人也不推薦vh 不過(guò)還是要支持的

早期固定式設(shè)計(jì) 大家都喜歡一種960的布局 大家都懂就不上圖了
為什么是960呢 因?yàn)檫@時(shí)候的屏幕都在1024 1366左右
后來(lái) 1920 出現(xiàn)了 就這樣

然后你的老板看到了

所以這時(shí)候一般設(shè)計(jì)師就改成了這樣 通常是1200 為什么是1200 因?yàn)檫€有1440這種屏幕啊

這時(shí)候大家通常的做法是多帶帶的寫一套css 最后在分析分析將 重復(fù)可以利用的提取出來(lái)

這是正確的 不過(guò)我要說(shuō)的是 對(duì)于這樣的web app呢 是否有種哭的感動(dòng) 不要說(shuō)用100% 一路繼承下去 煩死了

通常這里有兩種做法rem vw 不過(guò)vw更簡(jiǎn)單些 另外可能很多能人沒(méi)有注意到 bootstrap 很早就提供了一個(gè)

這個(gè)我以后說(shuō)到手機(jī)端優(yōu)化布局的時(shí)候會(huì)說(shuō)

media 這個(gè)的確就是在特定條件下觸發(fā) 用于更換樣式
不過(guò)rem vw這類單位可以無(wú)損適應(yīng)屏幕拉伸 變大 rem要做點(diǎn)兼容 也是可以的

media query是用來(lái)做斷點(diǎn)查詢的 這點(diǎn)很重要

pc端vw大概是個(gè)什么樣子

ie8瀏覽器在放大時(shí)候會(huì)有4px的邊 所以最大化時(shí)會(huì)有些差異

如何去實(shí)現(xiàn)ie8下的vw支持了 首先要獲取屏幕的寬高
不過(guò)值得注意的是首先要收集到瀏覽器的滾動(dòng)條寬度

當(dāng)body元素未加載時(shí)加入

window.documentElementclientWidthWithScrollBar = document.documentElement.clientWidth;

當(dāng)body元素加載完成時(shí) document的寬度會(huì)有所改變 body和html都為100%的寬度
這就說(shuō)明不會(huì)含有滾動(dòng)條寬度 所以在pc端vw和100%效果是不太一樣的 這個(gè)我后面會(huì)統(tǒng)一一個(gè)dw單位

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

后面我們就可以得到滾動(dòng)條的寬度

要說(shuō)這個(gè)實(shí)現(xiàn)的方法 我們要用sass或者postcss之類樣式預(yù)處理工具

首先說(shuō)說(shuō)頁(yè)面上js和css的如何通訊 首先我們確定一下通訊格式 json
sass 可以講map變成json SassyJSON github鏈接

然后如何將字符串放置到頁(yè)面上呢 我們知道瀏覽器在分析css時(shí)會(huì)把一些不合法的屬性給扔掉
不過(guò)有哪兩個(gè)屬性例外 content font-family 其中font-family兼容性最好

這時(shí)候我們?cè)陧?yè)面上部署一個(gè)meta標(biāo)簽

head里的標(biāo)簽也可以接受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:沒(méi)有什么要兼容的 intersting");
    return false;
}

使用getComputedStyle可以得到標(biāo)簽解析后的style 不過(guò)要恢復(fù)轉(zhuǎn)義

ie8沒(méi)有g(shù)etComputedStyle 所以我們要自己寫

!("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));

核心算法如下 具體是什么 我項(xiàng)目里看就是了

    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呢 首先是不可以通過(guò)document.styleSheets[index]方式直接獲取的
因?yàn)槟銦o(wú)法知道她在頁(yè)面中處于styleSheets哪個(gè)部分 那么可以寫innerHTML嗎 ie8不支持head中style寫innerHTML ie的CSSStyleSheet有一個(gè)owningElement屬性 其他可能有owningNode屬性 所以可以循環(huán)找擁有對(duì)應(yīng)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 的實(shí)現(xiàn)方式其實(shí)和vw vh差不多 就不多說(shuō)了
不過(guò)值得注意的是 calc(100% - $unit)的實(shí)現(xiàn)不是那么完美 fallback要做好

最常見的8格grid 自帶

要兼容到ie8

自適應(yīng)寬度變化 其實(shí)沒(méi)啥必要 但是咱們有vw這個(gè)單位 用啊

首先說(shuō)下原理

首先是代碼 因?yàn)橐嫒?必須多一層container

    

        
1
        
2
        
3
        
4
        
5
        
6
    
    

首先我們?yōu)槊總€(gè)layout__item加上margin-top margin-left

這時(shí)候我們要去除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
            ));
        }        

這里我們說(shuō)下 ie8 可以使用 :first-child + $class == nth-child(2)
+ $class 實(shí)際上就是 nth-child(n+2) 大家自己體會(huì)下

現(xiàn)在我們只要用一個(gè)container蓋住 就可以了

首先 avalon 是不錯(cuò)的可以兼容到ie8的方案 不過(guò)無(wú)法和flexbox兼容方案并存 這也挺遺憾的
不過(guò)這次帶來(lái)的angular的版本是1.4 github地址

這是一個(gè)可以使用的項(xiàng)目 可以在ie8 ie9上運(yùn)行
github地址