Day05-flexible.js

今日は、このような製品を購入するために網易1元に似て何かをする、プロジェクトの手から始まる、新会社への五日で、アンドリュースIOSプラットフォームH5サイト、3つのチャネルの合計もあります。最初のコードは、ヘッドヘッドはflexible.jsを導入しました。(詩:地獄は、私が知っているジョブとしてほぼ一年と白の前の半分を、それをやっているしていないものを感じが、応答ページを除いて真のモバイルH5ページを行っていない、彼は彼が2333333切望していたと述べました。 )OK、ADO、のはビジネスに取得してみましょう。

たとえば、今日はデザインのUI妹を受け、私は携帯電話サイズの様々な仕様のために非常に明確ではありませんでした。一般的には私の知る限りでは、通常のワイド750px。どのようにCSSスライスと書き込みに?具体的な詳細にアクセスすることができます(HTTP://www.jb51.net/article/7 ...、次転載ここによります)。iphone6幅が375pt、原因網膜画面、ウェブセクションとエンドセクション通常は同じです。

写真1

この問題に対する解決策は、(例えば750px * 1334pxドラフトデザインで)網膜画面です。

1)devicePixelRatio <= 2では、図カット設計喫水の統一された画像750を使用して

2)devicePixelRatio> = 2では、計画を切断する、いわゆる@ 3倍のドラフト設計である統一された画像750 * 1.5 = 1125を使用して。

750 * 1334の下に描くアートのカットデザイン案によると、IMG / @ 2Xこのフォルダを配置しています。

そして、設計案アートベクトル750の倍率を1.5倍にしましょう、そしてこのフォルダを3倍図の切断要件@図に従って同じを提供するために、カット、およびIMG / @ 3倍に置か:

このJSを使用した後、書いていません

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

自動処理にFlexible.js。


CSSの基本的な要件を書きます:

1)フォントサイズに加えて、他のサイズは、ラベル750のサイズに応じて発行され、ユニットREM変換方法の値に変換される:ドラフト注釈サイズ/フォントサイズの参照ラベルが発行されました。

640で示さドラフト標準のフォントサイズが64である幅付し発行;本実施形態は、(淘宝に750で示さドラフト標準のフォントサイズが75である幅発行示すように2)ドラフト標準フォントサイズを標識=、発行された幅/ 10ラベル)いずれかの設計案サイズで使用するため

あなたは、フォントサイズを設定する必要がある場合3)、以下の文言と同様の処理にHTMLデータ-DPRプロパティに許可することができます。

[data-dpr="2"] p {   font-size: 16px; }  

[data-dpr="3"] p {   font-size: 24px; } 

おすすめ

転載: www.cnblogs.com/homehtml/p/12585773.html