固定サイズのオブジェクトを応答性のある要素に変換します

私は最近、ウェブサイトにiPhoneを見せたい状況にいました。ユーザーがこの「モック」電話でアプリケーションデモと対話できるようにしたかったので、画像ではなくCSSでレンダリングする必要がありました。 MarvelApp/devices.cssという素晴らしいライブラリを見つけました。ライブラリは、純粋なCSSで必要なデバイスを実装しましたが、見栄えが良くなりましたが、問題がありました。提供したデバイスは応答性がありませんでした（つまり、スケーリングできませんでした）。オープンな問題にはいくつかのオプションがリストされていましたが、それぞれにブラウザの非互換性やその他の問題がありました。私は、デバイスを応答するようにライブラリを変更することに着手しました。

これが最終的な復活可能なライブラリです。以下では、作成に関連するコードをご覧ください。

元のライブラリはSASSで書かれており、ピクセルの固定サイジングの要素を使用してデバイスを実装しています。著者はまた、この記事全体で作業するiPhone Xを含む、各デバイスに簡単なHTML例を提供しました。これがオリジナルを見てみましょう。レンダリングするデバイスは、詳細ではありますが、かなり大きく、サイズを変更しないことに注意してください。

これがアプローチです

デバイスを再配置できるようにするために使用した3つのCSSトリックがあります。

1. Calc（）、入力が異なる単位を持っている場合でも計算を実行できるCSS関数
2. -size-divisor、var（）関数で使用されるCSSカスタムプロパティ
3. @mediaクエリは、min-widthで区切られています

それぞれを見てみましょう。

c alc（）

CSS Calc（）関数により、デバイスのさまざまな側面のサイズを変更できます。この関数は式を入力として受け取り、適切なユニットを使用して、出力として関数の評価を返します。デバイスを元のサイズの半分にしたい場合は、すべてのピクセル測定値を2で分割する必要があります。

前に：

幅：375px;

後：

幅：calc（375px / 2）;

2番目のスニペットは、最初のスニペットのサイズの半分の長さを生成します。元のライブラリのすべてのピクセル測定は、デバイス全体をサイズ化するためにCALC（）関数にラップする必要があります。

var（–size-divisor）

CSS変数は、どこでも使用する前にファイルの先頭に宣言する必要があります。

 ：根 {
  - サイズディビザー：3;
}

これにより、この値は、var（）関数を使用してStyleSheet全体でアクセスできます。マジック番号を避け、デバイスを応答するために必要なコードを簡素化しながら、すべてのピクセルカウントを同じ数字で分割することを望みます。これは非常に便利です。

幅：calc（375px / var（ -  size-divisor））;

上記の値を使用すると、これにより、元の幅をピクセル単位で3で割って返します。

@メディア

デバイスを応答させるには、画面サイズの変更に応答する必要があります。メディアクエリを使用してこれを達成します。これらのクエリは、画面サイズが与えられたしきい値を超えた場合、画面の幅と火を監視します。 XS、SMなどのブートストラップのサイズに基づいてブレークポイントを選択しました。

ゼロピクセルの最小幅にブレークポイントを設定する必要はありません。代わりに、ファイルの先頭にあるルート宣言は、これらの小さい画面を処理します。これらのメディアのクエリは、ドキュメントの最後に進み、最小幅の昇順で配置する必要があります。

 @media（min-width：576px）{
 ：根 {
   - サイズディビザー：2;
 }
}
@media（min-width：768px）{
 ：根 {
   - サイズディビザー：1.5;
 }
}
@media（min-width：992px）{ 
 ：根 {
   - サイズディビザー：1;
 }
}
@media（min-width：1200px）{ 
 ：根 {
   - サイズディビザー：.67;
 }
}

これらのクエリの値を変更すると、デバイスが受ける変更の大きさが調整されます。 calc（）は、整数と同様にフロートを処理することに注意してください。

Pythonを使用してプリプロセッサを前処理します

これらのツールを手に入れると、新しいアプローチを複数のラインライブラリに適用する方法が必要でした。結果のファイルは、可変宣言で開始され、各ピクセル測定がcalc（）関数にラップされたライブラリ全体を含み、上記のメディアクエリで終了します。

変更を手作業で準備するのではなく、すべてのピクセル測定値を自動的に変換するPythonスクリプトを作成しました。

 DEFスケール（トークン）：
 トークンの場合[-2：] == '; \ n'：
  return 'calc（' token [：-2] ' / var（ -  size-divisor））; \ n'
 Elif Token [-3：] == '）; \ n'：
  return '（' token [：-3] ' / var（ -  size-divisor））; \ n'
 return 'calc（' token ' / var（ -  size-divisor））'

この関数は、nnpxを含む文字列が与えられた場合、calc（nnpx / var（ - size-divisor））;を返します。ファイル全体で、幸いなことに、ピクセルの3つの一致しかありません。NNPX、NNPX。およびnnpx）;。残りは単なる文字列の連結です。ただし、これらのトークンは、各ラインをスペース文字で分離することにより、すでに生成されています。

 def build_file（scss）：
 out = '：root {\ n \ t--size-divisor：3; \ n} \ n \ n'
 SCSSのラインの場合：
  tokens = line.split（ ''）
  範囲のi（len（tokens））：
   トークンの「px」の場合[i]：
    トークン[i] =スケール（トークン[i]）
  out = '' .join（tokens）
 out = "@media（min-width：576px）{\ n \
  ：root {\ n \ t--size-divisor：2; \ n \
  } \ n} \ n \ n@media（min-width：768px）{\ n \
  ：root {\ n \ t--size-divisor：1.5; \ n \
  } \ n} \ n \ n@media（min-width：992px）{\
  \ n：root {\ n \ t  -  size-divisor：1; \ n \
  } \ n} \ n \ n@media（min-width：1200px）{\
  \ n：root {\ n \ t  -  size-divisor：.67; \ n} \ n} "
 戻ります

新しいライブラリを構築するこの関数は、CSS変数を宣言することから始まります。次に、ピクセル測定を求めてスケーリングするために、古いライブラリ全体を繰り返します。 PXを含む数百のトークンのそれぞれについて、そのトークンを拡大します。反復が進むにつれて、この関数はトークンに再び参加することにより元のライン構造を保持します。最後に、必要なメディアクエリを追加し、ライブラリ全体を文字列として返します。機能を実行し、ファイルから読み取りと書き込みをするための少しコードがジョブを終了します。

 __name__ == '__main__'の場合：
 f = open（ 'devices_old.scss'、 'r'）
 scss = f.readlines（）
 f.close（）
 out = build_file（scss）
 f = open（ 'devices_new.scss'、 'w'）
 f.write（out）
 f.close（）

このプロセスは、SASSに新しいライブラリを作成します。最終使用のためにCSSファイルを作成するには、実行します。

 sass devices_new.scss devices.css

この新しいライブラリは同じデバイスを提供していますが、応答性があります！ここにあります：

数千行である実際の出力ファイルを読むには、GitHubで確認してください。

他のアプローチ

このプロセスの結果はかなり説得力がありますが、それらを手に入れるのはちょっとした作業でした。なぜ私はより簡単なアプローチをとらなかったのですか？以下は、その利点と欠点を備えた3つのアプローチを示します。

ズーム

最初に有望なアプローチの1つは、ズームを使用してデバイスをスケーリングすることです。これはデバイスを均一にスケーリングし、私のソリューションと同様にメディアクエリと組み合わせることができますが、面倒なcalc（）と変数なしでは機能します。

これは単純な理由で機能しません。ズームは標準以外のプロパティです。他の制限の中でも、Firefoxではサポートされていません。

PXをEMに置き換えます

別のFind-and-Replaceアプローチは、PXのすべてのインスタンスをEMに置き換えることを規定しています。次に、デバイスはフォントサイズに応じて収縮して成長します。ただし、モバイルディスプレイに適合するのに十分なほど小さくするには、Chromeなどの最小サイズのブラウザよりも小さく、Enforceを使用する必要があります。このアプローチは、ウェブサイトへの訪問者がフォントサイズを大きくする支援技術を使用している場合にも困難になる可能性があります。

これは、すべての値を100倍に縮小し、標準のフォントサイズを適用することで対処できます。ただし、この記事のアプローチと同じくらい前処理が必要であり、フォントサイズを操作するのではなく、これらの計算を直接実行する方がエレガントだと思います。

規模（）

スケール（）関数は、オブジェクト全体のサイズを変更できます。関数はを返します。これは、スタイルの変換属性に指定できます。全体として、これは強力なアプローチですが、CSSデバイスの実際の測定値を変更しません。特に、デバイスの「画面」でレンダリングされた複雑なUI要素を使用して作業する場合は、アプローチが好きです。

Chris Coyierは、このアプローチを使用して例を作成しました。

結論は

このライブラリをゼロから実装した場合、何百ものCalc（）呼び出しが私が到達する最初のツールではないかもしれませんが、全体として、これは既存のライブラリを再配置可能にするための効果的なアプローチです。変数とメディアクエリを追加すると、オブジェクトが応答します。基礎となるライブラリを更新した場合、Pythonスクリプトはこれらの変更をレスポンシブライブラリの新しいバージョンに処理できます。

以上が固定サイズのオブジェクトを応答性のある要素に変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。