近年、モバイル端末向けに最もよく使用されている h5 応答ソリューションは rem ソリューションです。これには、応答性を実現するためにルート要素のフォント サイズを計算する必要があります。
しかし、この解決策には欠点もあります。つまり、font-size が整数ではない場合、一部のフォントは rem 単位を使用するため、フォント表示のサイズに問題が発生します。これは、プロジェクトのフロントエンド開発にとって依然として頭の痛い問題です。視覚的な復元要件が高いことが 1 つあります。
フロントエンドの応答性を解決するということは、異なるデバイスで正常に表示できるようにすることに他なりません。ここでは、rem メソッドを必要としない応答性の高いソリューションを紹介します。ここで話しているのは 750px をベースにしたデザイン案です。デザイン案では何ピクセル計測しましたか？
何pxを直接書きます。これは非常に高速で、rem 変換を必要としないのではないでしょうか?
ここでは実際に、transform のスケールを使用してページ サイズを拡大し、応答性を実現します。
コアコード:
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page); let _scale = window.outerWidth/750; , 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 + )); ') }, 100); ウィンドウ.onresize = スクリーンマッチ;上記のコードでは、page の ID を持つノードがページ要素全体の開始ノードであり、本文の下の最初の要素です。ここで、body/html は min-height:100%;height:100%; を設定する必要があります。
実際、ミニ プログラムで px 単位を使用することもできますが、ミニ プログラムで変換を使用すると、いくつかのフォントのギザギザのバグが発生します。最後に、互換性のために、zoom 属性を変更し、-webkit-zoom を使用しました。コアのコードは h5 とあまり変わりません。ズームサイズも同じです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。