前端 - 设计稿为1080*1920，适配多种移动设备，不用rem，怎么写？

Question

问题是这样的，设计师给我的是1080宽的设计稿，某个元素宽度为944，那么我该写多少px才能适配多种设备(安卓,ios)呢？不用rem。

Answer 1

なぜこのような奇妙なニーズがあるのでしょうか? 。 。 rem の実際の効果は px です。 。 。 rem を使用しない場合でも、px で記述する必要があります。 。 。 。
解決策: @media は一度に 1 サイズずつ書き込みます

Answer 2

ああ、また無知なデザイナーに騙されたフロントエンドの友人、ちょっと同情します。
デザイン ドラフトのサイズについて、rem を使用すると節約できると思いますか?

まず第一に、1080*1920 のサイズは Android または iOS 開発の設計案のサイズであり、フロントエンド開発のサイズを示すものではありません。
十分な自信がある場合は、フロントエンドの寸法に従ってデザインを再設計するようリクエストできます。
厳密にはiPhone6の2倍、つまり幅750、高さは任意です。
しかし、あなたには十分な強さがないようです ~ ~

そして、自分自身を苦しめ、妥協的な方法で解決してください。 [適応効果は非常に低くなります]

方法 1:
この比率は、実際のサイズとデザイン ドラフトのサイズの比率です。
要素の実際のサイズが x で、測定したサイズが 944 の場合、 x/944 = 375/1080 = 笑
だから、ゆっくり計算してください~ ~

方法 2:
PS のデザイン案を自分で幅 750 に修正するか、デザイン案の画像を保存して、幅 750 のデザイン案に放り込んでサイズを測定します
このように、測定した要素のサイズが y で、実際のサイズが x の場合、計算ははるかに簡単になり、x/y = 375/750 = 0.5

ついに

モバイルページのサイズは、幅が 320px から 580px まで異なるだけです。Android か iOS かはあまり気にする必要はありません。
** ページを PC で表示する必要がない場合は、その後、モバイルのみで rem を使用します。クライアント側でメディア クエリを使用する必要はありません。
また、メディアからの問い合わせにより、作業負荷が大幅に増加する可能性があります。慎重に使用してください。 **
rem を使用しない場合は、パーセンテージをさらに使用し、フレキシブル ボックス モデルをさらに使用し、適応方法についてさらに検討する必要があります。

Answer 3

PS を使用して設計ドラフトを縮小します
https://segmentfault.com/a/11...
説明については下にスクロールしてください。

Answer 4

タオバオのアダプティブソリューション lib-flexable.js
タオバオのものと似たhotcss.jsを追加したものもあります

Answer 5

デザインを厳しく批判してください。 PC とモバイル端末のドラフトは相互運用性がないと言えます。モバイル端末の設計ドラフトを作成するのが最善です

Answer 6

私のフロントエンドは、メディアを使用してさまざまなデバイスに適応します。通常、em、rem、px については、違いはありませんが、少しだけ違います。傲慢なデザイナー、それはただの理屈です。