zhilizhili-ui Dingping ie8910 はフロントエンド clean_html/css_WEB-ITnose を返します

zhilizhili-ui は、ie8 ソリューションの最新バージョンを提供します

機能

• フレックスボックスの一部の機能

• vw

• vh

• 関数の calc 部分

• angular1。 4

todo

avalon は、polyfill.js と調和して共存できず、flexbox を使用できないためです。残念なことに

webcomponent は使用できません。これらの問題は を使用しても解決できませんが、Cordova ソリューションには

flexbox

flexbox があり、flexibility.js の github アドレスを使用しています。互換性のあるソリューション

その後、迅速な開発ソリューションとして、emmet ソリューションも利用可能になります

例を示します

使用したい場合フレックス行レイアウト

sublime で zen-flex-row を直接入力してデフォルトのステートメント .layout.flex.horizo​​ntal>.layout__item*

に変えることができます。対応する HTML コード

webcomponents バージョンが異なります。この記事では、特定のバージョン以降の解決策が示されています。

注

ただし、柔軟性は正しくないことに注意してください。外部の長さを計算します justify-content し、すべての属性がテストに合格できます

高さが設定されているため、フルではないのはなぜですか

ie8 ie9 のテスト スクリーンショットは、スクリーンショットを繰り返さなくても同じ効果があります

align-items すべての属性をテストして渡すことができます

フレックス レイアウト項目の高さは 100% ではないことに注意してください。アイテムの高さを設定している場合は、align-items:stretch が役に立たなくても、設定した高さに応じて計算されます。

通常、レスポンシブを作成するとき。 PC 側のレイアウトは、1920 などのベースライン レイアウトを確認するのが好きです。vh は個人的には推奨しませんが、サポートする必要があります。

初期の固定デザインでは、960 のレイアウトが好きでした。誰もが知っているので、写真には示しません。

なぜこの頃の画面が 960 だったからですか。 1024 1366

その後、1920 年はこのように表示されました

そして、あなたの上司がそれを見て

なので、この時点で、一般的なデザイナーはこれを次のように変更しました。 1200. なぜ 1200 なのかというと、1440 の画面があるからです

この時、CSS を別途書いて、最後に繰り返し使えるものを解析して抽出するのが一般的です

>

それは正しいですが、私が言いたいのは、Web アプリについては、100% を使用するように言わないでください。ずっと続けるのは退屈です。

通常、ここには rem vw の 2 つの方法がありますが、vw の方が簡単です。さらに、多くの有能な人々はブートストラップにあまり早く気づいていない可能性があります。これについては、後で説明します。将来的には携帯電話上で最適化されたレイアウトについて話します

media これは確かに特定の条件下でトリガーされてスタイルが変更されますが、rem vw などのユニットはロスレスにすることができます。rem との互換性を高めることも可能です画面の伸縮と拡大に適応します

ブレークポイント クエリにメディア クエリが使用されることが非常に重要です

PC バージョンの vw はおそらくどのようなものですか

ie8 ブラウザーはズームインすると 4 ピクセルの側面を持つため、最大化するといくつかの違いが生じます

ie8 で vw サポートを実装する方法ですが、最初に、その幅と高さを取得する必要があります。ブラウザのスクロールバーの幅を最初に収集する必要があることに注意してください。

body 要素が読み込まれていない場合は、

body 要素が読み込まれたときの幅を追加します。ドキュメントの本文が変更されます html と html の幅はどちらも 100% です。これはスクロール バーの幅がなくなることを意味します。そのため、vw と PC 側の 100% の効果は同じではありません。dw 単位に統一します。後で

スクロール バーの幅を取得できます

これを実装する方法について説明するには、sass や postcss などのスタイル前処理ツールを使用する必要があります

window.documentElementclientWidthWithScrollBar = document.documentElement.clientWidth;

まず、ページ上の js と css について説明します。まず、通信形式を決定しましょう。json

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

sass マップを json に変換できます。 🎜>

では、どのように文字列をページに配置するのでしょうか? ブラウザーが CSS を解析していることはわかっていますが、いくつかの不正な属性が破棄されることがありますが、その中には 2 つの例外があります: content font-family。 -family は互換性が最も優れています

現時点では、ページにメタ タグを展開します

head のタグは font-family 属性も受け入れることができます

タグ解析後のスタイルを取得するには getComputedStyle を使用しますが、エスケープを元に戻す必要があります

ie8 には getComputedStyle がないため、自分で記述する必要があります

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

コアアルゴリズムは次のとおりです。私のプロジェクトで確認できます

    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地址