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

zhilizhili-ui 給大家?guī)硪粋€目前最新版本的ie8方案

flexbox部分功能

vw

vh

calc部分功能

angular1.4

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

webcomponent 無法在ie8 ie9上使用 也就無法解決這些問題了 不過cordova解決方案里會有

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

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

不過注意的是flexibility 無法正確計算外部長度
justify-content 全部屬性可以通過測試

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

align-items 全部屬性可以測試通過

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

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

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

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

然后你的老板看到了

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

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

這是正確的 不過我要說的是 對于這樣的web app呢 是否有種哭的感動 不要說用100% 一路繼承下去 煩死了

通常這里有兩種做法rem vw 不過vw更簡單些 另外可能很多能人沒有注意到 bootstrap 很早就提供了一個

這個我以后說到手機(jī)端優(yōu)化布局的時候會說

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

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

pc端vw大概是個什么樣子

ie8瀏覽器在放大時候會有4px的邊 所以最大化時會有些差異

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

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

window.documentElementclientWidthWithScrollBar = document.documentElement.clientWidth;

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

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

后面我們就可以得到滾動條的寬度

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

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

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

這時候我們在頁面上部署一個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:沒有什么要兼容的 intersting");
    return false;
}

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

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

最常見的8格grid 自帶

要兼容到ie8

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

首先說下原理

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

    

        
1
        
2
        
3
        
4
        
5
        
6
    
    

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

這時候我們要去除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 實(shí)際上就是 nth-child(n+2) 大家自己體會下

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

首先 avalon 是不錯的可以兼容到ie8的方案 不過無法和flexbox兼容方案并存 這也挺遺憾的
不過這次帶來的angular的版本是1.4 github地址

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