HTML5のページレムレイアウト適応方法の詳細説明

主な方法は次のとおりです。

1. デザインドラフトとデバイスの幅の比率に従って、HTML ルートタグのフォントサイズを動的に計算して設定します。
2. CSSではデザイン案の要素の幅、高さ、相対位置などを同じ割合でレム単位の値に変換し、
3. デザイン案のフォントはpx単位を使用しており、メディアクエリにより若干調整しています。

簡略化された一般バージョン:

 !(function(win, doc){ function setFontSize() { // ウィンドウの幅を取得します // これは、zepto が $(window).width() を実装する方法です var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' // 幅を 640 より大きく制限するには、CSS が var サイズと一致する必要があります。 = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ; } var evt = 'orientationchange' : 'resize';タイマー = null; win.addEventListener(evt, function () {クリアタイムアウト(タイマー); タイマー = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //setFontSize();}(window, document))を初期化します。

高精度バージョン:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // 現在のウィンドウの幅を取得します var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ). width; // 1080px を超える場合は 1080 を押します (幅 > 1080) { width = 1080; } var rem = width / 10; console.log(rem) = rem + 'px'; // エラーと互換性の処理 varactualSize = win.getComputedStyle && parseFloat(win) .getComputedStyle(docEl)[font-size]); if (actualSize !== rem &&actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / docEl.style.fontSize = remScaled + 'px' } } var timer() { clearTimeout(timer); = setTimeout(setFontSize, 100); } //ウィンドウ更新によりフォントサイズが動的に変更されますWIN.addEventListener('resize', dbcRefresh, false); //ページ表示時に一度計算 WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//H5 アクティビティ プッシュ ページの場合、幅と高さの比率が必要であり、関数AdjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); // ナビゲーション バー if (width / height < 360 / 600) ) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ 高さ, 幅, 位置: '相対', 上: 0, left: 'auto', margin: '0 auto' }); // rem window.setFontSize(width);} を再計算します。

使い方は簡単ですが、柔軟性に欠けます。デモをご覧ください。

 @media 画面と ( min-width: 320px){html{font-size:50px}}@media 画面と ( min-width: 360px){html{font-size:56.25px}}@media 画面と ( min- width: 375px){html{font-size:58.59375px}}@media screen and ( min-width: 384px){html{font-size:60px}}@media 画面と ( min-width: 400px){html{font-size:62.5px}}@media 画面と ( min-width: 414px){html{font- size:64.6875px}}@media 画面と ( min-width: 424px){html{font-size:66.25px}}@media 画面と ( min-width: 480px){html{font-size:75px}}@media 画面と ( min-width: 540px){html{font-サイズ:84.375px}}@media 画面と ( min-width: 640px){html{font-size:100px}}

上記のデモの作成方法は、個人のプロジェクトのニーズや製品設計に応じて適切に変更できます。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。