ホームページ > 記事 > ウェブフロントエンド > pxユニットhtml5レスポンシブソリューションの詳細説明

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

小云云オリジナル: 2018-03-12 10:03:051457ブラウズ

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

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

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

コアコード:

let screenMatch = () => {
            document.body.style.setProperty(&#39;visibility&#39;, &#39;hidden&#39;)
            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(&#39;visibility&#39;, &#39;visible&#39;)
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

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

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

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

関連記事