pxユニットhtml5レスポンシブソリューションの詳細説明

近年最も使用されているモバイル h5 対応ソリューションは、rem ソリューションです。これには、応答性を実現するためにルート要素のフォント サイズを計算する必要があります。この記事では、px 単位の HTML5 レスポンシブ ソリューションに関する関連情報を中心に紹介します。お役に立てれば幸いです。

しかし、この解決策には欠点もあります。つまり、フォント サイズが整数ではない場合、一部のフォントはレム単位を使用するため、視覚的な復元要件が比較的高いプロジェクトの場合、フォント表示のサイズに問題が発生します。これはフロントエンド開発にとって依然として非常に難しいことです。

フロントエンドの応答性に対する解決策は、さまざまなデバイスでの通常の表示にすぎません。ここでは、rem メソッドを必要としない応答性の高いソリューションを紹介します。ここで話しているのは 750px をベースにしたデザイン案です。デザイン案では何ピクセルを計測しますか? スタイルには何ピクセルを書くだけです。これは非常に高速で、rem 変換を必要としないのではないでしょうか?

transform
transform-origin
ここでは、応答性を実現するために、実際にtransformのscaleを使用してページサイズを拡大縮小します。

コアコード:

let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page");
            let _scale = window.outerWidth/750;
            
            page.style.setProperty("transformOrigin", "0 0");
            page.style.setProperty("transform", "scale("+ _scale + ")");
            //兼容ios8
            page.style.setProperty("-webkit-transform-origin", "0 0");
            page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
            setTimeout(() => {
  
                page.style.setProperty("transformOrigin", "0 0");
                page.style.setProperty("transform", "scale("+ _scale + ")");
                //兼容ios8
                page.style.setProperty("-webkit-transform-origin", "0 0");
                page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
                document.body.style.setProperty('visibility', 'visible')
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

上記のコードでは、ID page を持つノードは、ページ要素全体の開始ノードであり、本文の下の最初の要素です。ここで、body/html は min-height:100%;height:100%; を設定する必要があります

実際、ミニ プログラムで px 単位を使用することもできますが、ミニ プログラムで変換を使用すると、フォントのギザギザが発生します。バグを修正し、最終的に変更します。zoom 属性を追加し、互換性のために -webkit-zoom を使用します。コアのコードは h5 とあまり変わりません。ズームサイズも同じです。

関連する推奨事項:

HTML5 レスポンシブ バナー制作チュートリアル

Jiugongge を実装するための HTML5 レスポンシブ デザインのサンプル コードの詳細な紹介 (写真)

HTML5 レスポンシブ フレームワークのトップ 10_html/css_WEB-ITnose

以上がpxユニットhtml5レスポンシブソリューションの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。