デザイン案を入手した後、レイアウトを元に戻すにはどうすればよいですか?
厳密ではないレスポンシブ デザインのみを実行する必要がある場合は、メディア クエリを使用してそれを実現しても問題ありません。設計ドラフトを正確に復元する必要がある場合、これは通常、ズームによって実現されます。一般的なソリューションには、ビューポートベースおよびレムベースのスケーリング ソリューションが含まれます。
1 ビューポート ズーム スキームモバイル側では、ビューポートを通じてページ サイズの比率を拡大縮小することで目的を達成できます。
簡単に言うと、幅と高さのすべてのピクセルがビジュアル原稿の出力と同じになり、ページ幅とビジュアル原稿の幅の比率によってビューポートが動的に設定されます。スケーリング スキームのコア コード リファレンス:
(function () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top !== window) { return pageScale; } docEl.clientWidth || var height = docEl.clientHeight || if (width / height >= 360 / 640) { // 高さの優先度 pageScale = width / 360; content = 'width=' + 360 + '、initial-scale=' + pageScale + '、最大スケール=' + pageScale + '、user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); } if (isMobile) { setScale() ; } else { docEl.className += ' PC';このソリューションは、昨年の H5 アクティビティ ページのデザインで実践されました。
ただし、PC上で表示したい場合、ビューポートのスケーリングという概念がないため、固定値でしか設定できず、理想的ではありません。
2レムのレイアウト適応ソリューションrem レイアウト適応ソリューションは頻繁に言及されており、大手インターネット企業の製品で広く使用されています。
簡単に言えば、その方法は次のとおりです。
例を挙げて説明しましょう。
2.1 HTMLタグのフォントサイズを動的に設定する最初の問題は、HTML タグのフォント サイズの動的計算です。これは、変換率がどのように合意されるかによって異なります。例として、ページ幅の 10 等分を取ると、コア コードは次のようになります。
(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); docEl.style.fontSize = rem + 'px'; // 一部のモデルでのエラーと互換性の処理 varactualSize = win parseFloat(win.getComputedStyle(docEl)[font-size]); if (actualSize !== rem &&) actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem /actualSize; docEl.style.fontSize = remScaled + 'px'; } var timer; //関数スロットル関数 dbcRefresh() {クリアタイムアウト(タイマー) = setTimeout(setFontSize, 100); //ウィンドウ更新でフォントサイズを動的に変更 WIN.addEventListener('resize', dbcRefresh, false); // ページ表示時に一度計算 WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh () } }、setFontSize();})(ウィンドウ);さらに、全画面の H5 アクティビティ ページの場合はアスペクト比の要件があるため、この時点で調整を行う必要があります。次のようにして実行できます。
functionAdjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window) const height = $win.width(); // ナビゲーション バーを考慮します if (width / height < 360 / 600) { return } width = Math.ceil(height * 360 / 640); $(warpId).css({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // rem window.setFontSize(width) を再計算します;}このスケーリング方法に従うと、ほぼすべてのデバイスで比例スケーリングによる正確なレイアウトを実現できます。
2.2 要素サイズの値の算出方法2 番目の問題は、要素サイズの値です。
デザイン案の幅が1080pxの場合を例に、変換しやすいように幅を10等分し、1rem = 1080 / 10 = 108pxとします。変換方法は次のとおりです。
const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem; if (typeof px === string && px.match(/px$/)) { remVal += 'rem' } remVal を返します;}たとえば、デザイン ドラフトには、サイズが 460x210、相対ページ位置が top: 321px left: 70; の画像があります。上記の変換方法によると、要素の最終的な CSS スタイルは次のようになります。
.img_demo { 位置: 絶対; 背景画像: url('demo.png'); 左: 0.64814 レム; } 2.3 remレイアウト方式の開発方法以上の方法により、remレイアウト方式が実現される。しかし、rem の値を手動で計算するのは明らかに非現実的です。
less/sass 前処理ツールを使用すると、ミックスイン メソッドを設定し、デザイン ドラフトの実際のサイズに応じて値を設定するだけで済みます。 Less を例として挙げると、ミックスインのリファレンスは次のとおりです。
// px から rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@左, 左, @rem); .px2rem(@幅, 幅, @rem); }前の例の要素の場合、CSS スタイルは次のように記述できます。
.img_demo { 位置: 絶対; 背景画像: url('demo.png'); }ここで、幅と高さはデザインドラフトで出力された絵素のサイズから直接読み取ることができ、上/左の値はPhotoshopで基準線を移動して要素を配置することですぐに取得できます。
2.4 フォントはピクセルを単位として使用しますレム比率を使用してフォントを拡大縮小すると、表示上の問題が発生します。メディア クエリを使用して複数のサイズを設定するだけです。
参考例:
// フォント対応 @media screen and (max-width: 321px) { body { font-size: 13px; }}@media screen and (min-width: 321px) and (max-width: 400px) { body { font -サイズ: 14px; }}@media screen and (min-width: 400px) { body { font-size: 16ピクセル; }}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。