モバイル アダプティブ レイアウトの効率的な方法については、welcome_html/css_WEB-ITnose を参照してください。

これは私の個人的な好みです。利点は、適応時間とエネルギーを大幅に節約できることです。 1. 一般的なアプローチは、最初に小さな JS を使用してデバイスの幅を決定し、次にフォント サイズを設定することです。ルート要素 html の場合は、ページ全体に適応します。

2. CSS では、フォント サイズであっても、幅と高さであっても、em または rem 単位が使用されている場合 (1px は無視できます)、最終的にはルート要素 html の font-size によって決まります。たとえば、設計図の幅が 640px の場合、モバイル端末の本体幅 (場合によっては使用可能な幅) を clientWidth として、HTML の font-size を 20px に設定します。この端末で復元する必要がある場合は、適応された HTML のフォント サイズの値を clientWidth/(640/(20*2)) に変更してからレンダリングする必要があります (通常、モバイル フォント サイズは 2 で割る必要があります)。 DOM全体。 JS は次のとおりです:

functionadaptFun(designPercent){

var mainWidth = document.body.clientWidth;

var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
//Whenウィンドウが変化します。この場合、実際の値はそれほど大きくありません。最も重要なことは最初の適応です
window.onresize = function(){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
を通して を通して、を通して、を通して、を通してoutmbmb outmbストレート outallow right outmb's together out out out out of - - - - to fontSize
}
}

adaptFun(640/40);

上記のコードを別のファイル (adapt.js) に置きました。 ;

3.adapt.js をページに配置して実行する方法

adapt.js が最適です。できるだけ高い位置に配置し、本文の後にできるだけ近づけるようにしてください (以下を参照)。現時点ではあまりロードされていませんが、document.body.clientWidth はすでに決定されているため、元の HTML のフォント サイズの値を変更できます。

このようにして、ページはほとんどの端末で元のデザイン効果を表示します。デバイスピクセル比が 1.5 または 3 のデバイスがあっても、相対的な位置を変更したい場合は、メディア クエリを記述するだけです (特に複雑なページでない限り、メディア クエリは必要ありません)。

4. 利点と概要

適応のためにメディアクエリに依存する場合は、多くのコードを記述する必要があり、将来的に同様のプロジェクトから学びたい場合は、それも必要になります。再適応するには時間がかかります。

デザイン幅のあるバージョンを書く限り（たとえば、640または320幅のバージョンを書く）、他の自動適応はPCページを書くのとそれほど変わらないと個人的には思います。

テストアドレス: http://game.feiliu.com/zk/ysg/main/index.html