移動端レイアウトの概要&原理解析

アリーflexibleレイアウト-バージョン1.x
このレイアウトは2017年8月9日に2.0バージョンに置き換えられました.
実施原理 （UI 750px ）

はviewportのscale = 1/window.devicePixelRatio

を設置します.

は、スクリーンを10つに分割し、font-size = / 10;

開発時に直接( DOM )px

を記入します.

は、px2rem を用いて、−＞リアルrem

に変換される.
アリーflexibleレイアウト-バージョン2.x
flexible 2.x:https://github.com/amfe/lib-flexible
原理を実現する

viewportの理想的なビューを利用して、1.xバージョンのscaleスケーリング

を削除します.

他は相変わらず1.xバージョンと同じ

です.
網易のレイアウト
個人的に好きなレイアウト
実施原理 （UI 750px ）

は、低バージョンブラウザのようなものである.

UI原稿はfont-size = 100px;を参照として、 = 7.5rem

DOM px / 100 = rem(計算が便利)

他のスクリーンは font-size

を押します.

高バージョンのブラウザの場合:

1px/750px ≈ 0.1333333%

は、低バージョンの論理に従う.font-size = 0.1333333% * 100 = 13.33333vw

webpackプラグインpostcs-px-to-viewport
名前の通りpxをvw、vh、vmin、vmaxに変換します.

{
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 3,
    viewportUnit: 'vw',
    selectorBlackList: ['.ignore', '.hairlines'],
    minPixelValue： 1,
    mediaQuery: false
}

End
記事共有の同期:https://github.com/zhongmeizhi/gitbook-FED