adaptive.jsはモバイル側により簡単なシナリオを開発させる

前言
携帯電話が手放さない今の社会では、モバイル端末のページ開発は日常茶飯事になっており、どのように携帯電話のページを開発してより安心させるかは、フロントエンドのエンジニアにとって欠かせないスキルです.
adaptive.js
私が手淘案を参考にして作成した非常にコンパクトなjsコードの断片は、あなたの携帯電話のページを開発することができます.くだらないことは言わないで、まずdemoページを見てみましょう.

ページを開くには、Chromeブラウザでモバイル側シミュレータを使用して

を表示します.

または携帯電話でQRコードをスキャンして表示:

シナリオの原理
ハンドヘルド方式を参考にして、adaptive.jsはページ幅全体を平均10部に分け、clineWidth / 10の結果をhtmlラベルのfont-size値とした.レイアウトではremを単位として使用します.
くりを一つあげる
あるUIが設計した携帯電話のページの設計原稿幅は750pxで、それでは10部に分けて75pxで、この時htmlラベルのfont-size: 75pxで、レイアウトの時あるモジュールは設計原稿の上で幅が100pxで、remに転換すると:100 / 75 = 1.3333rem;cssではwidth: 1.3333remである.
使用方法adaptive.jsは非常にコンパクトで、圧縮されたadaptive.min.jsの大きさは1 KBしかありません.adaptive.jsはjsライブラリに依存しません.headラベルでadaptive.min.jsを参照すると、次のテンプレートを使用して開発することをお勧めします.

にadaptive.jsアドレスを します.https://github.com/Vibing/ada...