私はphpdを書きます。最近、会社のアプリを作るのにWeb開発が無くて暇なので出陣するのがポイントです。 レスポンシブ レイアウト、Web 側?私は常に PHP に TP フレームワークを使用してきましたが、Web に関して最初に思い浮かぶのはブートストラップ フレームワークです。単純な

私はphpdを書きます。最近、会社のアプリを作るのにWeb開発が無くて暇なので出陣するのがポイントです。

レスポンシブレイアウト、ウェブ側?私は常に PHP に TP フレームワークを使用してきましたが、Web に関して最初に思い浮かぶのはブートストラップ フレームワークです。 Bootstrap は、ざっと理解しただけで、実際に使ってみたわけではありませんが、思ったよりも簡単です。重要なのは、ここに鍵があります...

このアプリは携帯電話でのみ利用可能であり、基本的に PC では利用できません。つまり、モバイル版に合わせてしか開発できないので、ブースストラップレスポンシブレイアウトはアプリには適していません（とにかく、半完成品を作ったのですが、ひっくり返りました）。もう楽しく働けない、とても静かな時間だ。 。 Baidu と Baidu は、同僚に尋ねたところ、女の子のフレームワークである amaze ui を見つけました。これで、ようやく手間が省けました。

amaze フレームワークをダウンロードした後、ファイルの紹介が別途紹介されているので、ドキュメントをよく読まないと非常に苦痛になります (私がそうだったので、非常に苦痛です)。拷問的です）。

amaze のインポート ファイルは参考のためにのみ添付されています。

ちなみに、携帯電話ではこの文をヘッダーに追加する必要があります

すべての準備が整ったので、本題に入るだけです。

現在の携帯電話の最小幅は 300 ですが、正直なところ、スマートフォンの 300 画面はおそらく利用できないため、iPhone 4 の 320 に合わせて Web をデザインします。ここで、デザイナーが指定した 640 の参照画像をどうするかという質問が生じます。すべてのピクセルを 2 で割れば、すべてが解決されます。

amaze フレームワークを使用しても、さまざまな解像度のピクセルの問題をうまく解決できません。最も難しいのは、@media のみの画面と (min-width:320px) と (max-width:480px) { を多数設定することです。 } 画面の範囲スタイル。耐えられないほど痛かった。 。それを制御する方法はありますか? JD.com はどうやってそれを行ったのでしょうか? Xiaomiはどうやってそれを実現したのでしょうか？ Baidu では、Du Niang からのすべての答えを見つけることができます。

答えはたくさんあるので、ゆっくりフィルタリングしてください...

それで私はこのコードを見つけました

それでは、質問は、これはそのページだけのもので、すべての場所をさまざまなサイズでブラウザは適応できますが、どうすれば解決できますか?

clientwidth は画面表示の幅を取得し、320 に基づいて最小画面を 320 に設定し、最小フォントは 12 ピクセルになります。それで変化がありました。

さて、どのブラウザでも、最大幅は 320、最小幅は 12px です。次に、すべてのレイアウトにどの単位を使用する必要があるかという別の質問があります。 px/em/pt/rem

px は最も正確な単位であり、固定値です。 em 値は固定されておらず、親要素から継承されます。 rem は要素を設定するときの相対サイズですが、HTML ルート要素に対して相対的なサイズです。 ptは印刷業界の単位ですが、アプリ開発でも使われます。

さて、どれを使用すべきでしょうか? まず、上記のアダプティブ js の実行効果を見てみましょう。

インライン フォント スタイルは HTML 要素で生成され、答えがあります。

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。