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

zhilizhili-ui 給大家帶來一個目前最新版本的ie8方案

flexbox部分功能

vw

vh

calc部分功能

angular1.4

avalon是因為無法和polyfill.js和諧共處 無法使用flexbox 真可惜

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

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寫法上有些不同 不過標準寫法 也會實現的
這里我要說說設計師 和 前端之間的配合問題

通常 我們在寫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標簽

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 的實現方式其實和vw vh差不多 就不多說了
不過值得注意的是 calc(100% - $unit)的實現不是那么完美 fallback要做好

最常見的8格grid 自帶

要兼容到ie8

自適應寬度變化 其實沒啥必要 但是咱們有vw這個單位 用啊

首先說下原理

首先是代碼 因為要兼容 必須多一層container

    

        
1
        
2
        
3
        
4
        
5
        
6
    
    

首先我們為每個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 實際上就是 nth-child(n+2) 大家自己體會下

現在我們只要用一個container蓋住 就可以了

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

這是一個可以使用的項目 可以在ie8 ie9上運行
github地址