モバイル Web はさまざまな画面に適応し、上下左右のスクロール バーは表示されません。マスターは help_html/css_WEB-ITnose にあります。

RT
現在、モバイル Web が存在し、PSD デザイン ドラフトは 640x1130 (w/h) であり、現在の要件は、さまざまなサイズの画面とデザイン内の画像とボタンを備えた携帯電話ではスクロール バーが表示されないことです。ドラフトは引き伸ばされません。つまり、均等に拡大縮小します。

私の最初のアプローチは、幅:100%、高さ:100%で、デザインドラフト内の画像の割合を計算し、別のモバイルでCSSスタイルを記述しました。電話とページの要素はすべて、さまざまな方法で引き伸ばされたり縮められたりしているように見え、やり直しに戻されました

私の現在のアイデアは、まずボディにアスペクト比 1136/640 のコンテナを作成してから、パーセント レイアウトでは、この 1136/640 コンテナのアスペクト比をいつ設定するかが問題になります。私の実装手順は、zepto.js を使用することです

$(document).ready(function(){        // code   //...在屏幕中间，取出一个面积最大的 1136/640的容器，然后使其居中，左右留白})

しかし、この方法では、このアクションを実行する前にページ DOM がロードされています。これは少し遅れています。私の次のアイデアは、1136/ で前のタグを使用することです。 640 コンテナー、すべて js で記述し、コンテナーがアスペクト比 1136/640 を設定するのを待ってから、このコンテナーにラベルを追加します

この方法が実現可能かどうかはわかりません。バックグラウンド プログラムを作成しますか? これは非常に悪いデザインだと思います。貴重な意見、提案、アイデア、解決策を教えてください。ありがとうございます

ディスカッション (解決策) に返信してください

レスポンシブ デザインを検索してください。

簡単な 0ed3e37bc8e356389e6760ed6c624802

複雑な CSS メディアクエリを使ってみる

@ 2 階、3 階

全部あります、連絡先はありますが、現在の市場は非常に厳しいです。複数の携帯電話、メディアクエリです。どうすればよいですか?
問題を明確に説明していない可能性があります:

PSD デザインのドラフトは 640 x 1136 (幅 x 高さ) のみであり、要件も満たされていません。

1. デザインドラフトのコンテンツは全画面で表示され、左右のスペースが許可されます。下に空白スペースを残します
2. スクロールバーは表示されません
3. さまざまなサイズの携帯電話では、要素が表示されます。デザインドラフトの均等なスケーリングを達成するために圧縮したり引き延ばしたりすることはできません

以下に示すように、レスポンシブデザインとメディアクエリが実装されている場合、分割点を設定する方法について、詳細な手順を教えてください。ありがとうございます

jsで計算して、デバイスの高さから頭と尾の高さを引いたものがコンテンツエリアの高さ、デバイスの幅がコンテンツエリアの幅となり、デザインを押して画像の画像比率が、幅が小さいか高さが小さい (たとえば、画像の幅と高さの比率が 2:3 の場合、コンテンツ領域のサイズが 220:300 であっても、高さの方が小さいとみなされます) に基づいて計算されます。小さいサイズの画像サイズで十分です（例えば、高さで計算すると、自動的に拡大縮小するように幅は設定されません）

センタリングについては、難しくないと思います

jsで計算しますデバイスの高さから頭と尾の高さを引いたものがコンテンツ領域の高さであり、デバイスの幅がコンテンツ領域の幅であり、それに応じて幅が小さいか高さが小さいかを計算します。設計図の絵の比率 (たとえば、絵の幅と高さの比率が 2:3 の場合、コンテンツ領域のサイズが 220:300 であっても、依然として高さが小さいとみなされます)、小さい)、および次に、小さい方のサイズに基づいて画像サイズを計算します (たとえば、高さに基づいて計算すると、幅は自動的に拡大縮小するように設定されません)

センタリングに関しては、難しいことではないと思います

さて、ありがとう。基本的にはそれを見つけました。共通点があります。私もそう思いました。しかし、コードを実装するには、dom がロードされた後に表示領域のアスペクト比を読み取る必要があります。CSS を 2 セット使用する場合、ブラウザーのアスペクト比は次のようになります。画像のアスペクト比より大きい場合は 1 つの CSS セットがあり、 より小さい場合は別の CSS セットが存在します。必要なスタイル ファイルを参照するにはどうすればよいですか?
パーセンテージ画像が変形されている場合は、画像の幅のパーセンテージを設定するだけでよく、高さは設定しません。

外側のコンテナ

上部
中央 (9 マスのグリッド)
下部
レイアウト


と仮定します。上、中、下の3つのエリア すべて外側のコンテナを基準にしています
上、中、下はすべてパーセンテージで設定されています
9マスのグリッドは幅と高さがすべて33%です

1) 制御したいものは外側のコンテナのサイズです。CSSでもJSでも何でもいいです
2) すべてのスケーリングは不可能です。例えば、上の図では、同じ比率で引き伸ばすと、必然的に一部の端が表示されなくなります

。

さらに、デバイスを横向きにしたときの外側のコンテナのサイズの定義を考慮する必要があります

画面を埋め続けるか、画面を埋め尽くしてプレイ中の幅の比率を伸ばすか、min-height を設定するかどうか

パーセンテージ画像が変形されている場合は、画像の幅のパーセンテージを設定するだけでよく、高さは設定しないでください

うーん、主な問題はページ全体の設定です