javascript - アート/UIのPSD画像を取得して、フロントエンドページの順序を記述してください。-PHP中国語ネットワークQ&A

私が入手した PSD の解像度は 750*1334 で、これは iPhone6 の解像度になるはずです。それでは、この時点で Chrome シミュレーターは iPhone6 に設定されますか?その場合、
「質問 1」はこちらです。私のコンピュータの解像度は 1366*768 です。Chrome が iPhone 6 をシミュレートすると、拡大縮小されます。これは、通常、モバイルページを拡大縮小せずに表示できるように、Web ページの効果に影響します。拡大縮小によるぼやけはありません。なので、iPhone6のPSDを作るためにiPhone5に設定すると、絶対に全く同じにはなりません（アイコンのサイズはPSDより確実に小さくなります）。後で、
「質問 2」長さ、幅、行の高さを含むすべての CSS で px と em の代わりに rem 単位を使用するように設定しましたが、この場合は私だけが行うことができます。さまざまな解像度の携帯電話ではかろうじて対応できますが、PSD と完全に同じにすることはできません。それで、また迷ってしまいました。
「質問 3」、アーティストから提供された iPhone の PSD、一部のページでは要素の長さ px がマークされますが、一部のページではマークされません。非常に奇妙です。Chrome シミュレーターを iPhone6 に設定してからピクセルレベルにすべきです。 psd偏差0で？ iPhone5とiPhone6plusの解像度以下のページは@mediaを使って書き分けたほうがいいでしょうか？それはとても疲れます！！以前はPC版では画素ずれ0を実現できましたが、モバイル版では非力に感じました！
「質問 4」受け取った PSD に、drawable-xxhdpi などの 5 つのフォルダーが存在することがありますが、これらは実際には最大のフォルダー内のアイコンを使用しています。さまざまな解像度の携帯電話に対応し、@media でさまざまなサイズのアイコンを使用する必要があるでしょうか?

--------------------------------区切り線---------------------------- ------------------------

実際、長い間話したにもかかわらず、モバイルページの作成方法がまだわかりません。チュートリアルか何かはありますか? すべての解像度でモバイルページに対応する必要がありますか? iPhone 5 の下のページをほぼ同じになるように調整した結果、アーティストは、なぜ iPhone 6 plus がフロントエンドで私だけが PSD 要素と大きく異なるのかを尋ねます。アーティストはフロントエンドを理解していないので、Zhihu には投稿しません。これが恐ろしいことです。皆さん、アドバイスをお願いします。

全員に返信 (9)

刘奇2017-05-16 13:23:54 9棟

最初: iPhone 6 がズームするとは、デバッグのために Chrome をモバイルモードにすると、iPhone 6 の下部のレイアウトが見えなくなるという意味ですか?その場合は100％を75％に下げるとフォントがはっきり見えずに全体が表示されます。写真に示すように:

二番目: モバイルレイアウトを行う場合は、baidu で検索して、インターネット上に詳細な説明がたくさんあるので、flexible.js を使用することをお勧めします。 js をレイアウトする場合、rem は通常 75px を指します。フォントは data-dpr に従って設定されます。1 つの場合、1 つの場合、1 つの場合、2 つの設定が必要です。したがって、モバイル端末上のフォントサイズは可能な限り一定に保つ必要があります。使用するタグを一定に保つことが最善であり、作業負荷は大幅に軽減されます。

3 番目: 個人的には、ワークロードが非常に大きいため、各インターフェイスによって維持される距離範囲が視覚的に同じである限り、ピクセルの差を 0 にする必要はないと思います。そのため、距離なども同じである必要があります。 rem レイアウトなので、誤差はそれほど大きくありません。

4 番目: 私は最大のアイコンを使用することに慣れています。それでも構わない場合、または会社が必要とする場合は、各アイコンをメディア化することができます。必要がない場合は、最大のアイコンを選択するだけで済みます。大きな画面が表示されました。

モバイルのレイアウトでは多くの適応の問題が発生する可能性があり、Chrome のデバッグは正確ではない可能性があります。ただし、携帯電話では基本的に答えが見つかります。レイアウトの成功を祈っています。

いいねを押す+0

返信を追加

阿神2017-05-16 13:23:54 8棟

この記事も読めます

过去多啦不再A梦2017-05-16 13:23:54 7棟

リーリー

このコードを HTML ファイルの先頭に置き、ウィンドウの変化を監視し、それが 750px かどうかをマークします
7.5rem と書き込みます

Peter_Zhu2017-05-16 13:23:54 6棟

モバイルショッピングの実装方法: http://www.w3cplus.com/mobile...

曾经蜡笔没有小新2017-05-16 13:23:54 5棟

実装が正確かどうかは別として、設計図と全く同じにする必要はないと思います。さらに、画像の枚数が多ければそれだけの価値があるのでしょうか？時間があれば、何か実践的なことをするのも良いでしょう。卓越性を目指す人なら、それを試してみることもできます。

第二に、アーティストから渡された PSD ファイル (将来的には「デザイン」と呼ぶことが推奨されます) の一部にはマークが付けられておらず、自動でマークを付ける方法がわからないとおっしゃいました。 Biaoniimei や pxCook などのインターネット上のマーキングツール。

3番目に、Chromeのシミュレーターを使用してiPhone 6に設定すると、サイズが設定できると言えますか?

淡淡烟草味2017-05-16 13:23:54 4棟

私はたまたま最近、モバイルのシングルページアプリケーションを作成しており、勉強もしています。スタイラスなどのいくつかの CSS 前処理方法を学習することをお勧めします。たとえば、私の写真は XXXX@2x.png、XXXX@3x.png です。これら 2 つは、異なる dpi の携帯電話に対応します。メソッドを定義しました:
リーリー
その後、必要なときにいつでも使用できます

その後、パッケージ化ツールによってコンパイルされた後、異なる dpi の携帯電話に対して異なる画像が表示されます。

はっきりしないかもしれません。。私もスタイラス初心者なので

さらに、デバッグのために、WeChat Web 開発者ツールを試すことができます

小葫芦2017-05-16 13:23:54 3棟

異なる解像度のページに対応する必要があります。これは、アーティストがフロントエンドを理解していない必要があります。

モバイルレイアウトの場合、個人的な経験から、
1.幅にはパーセントを使用することをお勧めします
2.高さは自動的に拡大されるか、パーセントで指定されます
3.フォントサイズに関しては、主流の推奨事項はremだと思いますが、私はvwを使用することを好みます。 vw はメディア解像度の判断をまったく行う必要がなくなりました。 vw は一部の古い携帯電話と互換性がないという人もいますが、私が実際にテストしたところ、vw と互換性がない携帯電話の割合はほとんど無視できました。

滿天的星座2017-05-16 13:23:54 2棟

幅のパーセンテージと固定サイズは状況に応じて使用され、box-sizing: border-box がうまく機能します。
フォントにはメディアクエリまたはレムを使用します。PCにも適応させる必要があるため、私は基本的にメディアクエリを使用します。
モバイル端末の適応はiPhone 6のサイズに基づいています。それ以外の場合は、表示に問題がないことを確認してください。 Transform を使用すると、特定の要素を必要に応じて拡大縮小することができます。
表示効果を達成できる限り、0ピクセルの偏差は必要ありません。このページはユーザー向けであり、アーティスト向けではありません。