شرح تفصيلي لطريقة تكييف تخطيط REM المحمول لصفحة نشاط H5

بعد الحصول على مسودة التصميم، كيفية استعادة التخطيط؟

إذا كنت تحتاج فقط إلى القيام بتصميم سريع الاستجابة غير دقيق، فلا بأس باستخدام استعلامات الوسائط لتحقيق ذلك. إذا كان من الضروري استعادة مسودة التصميم بدقة، فعادةً ما يتم تحقيق ذلك من خلال التكبير/التصغير. تتضمن الحلول الشائعة حلول القياس المستندة إلى إطار العرض والمعتمدة على rem.

على الجانب المحمول، يمكن تحقيق الغرض عن طريق قياس نسبة حجم الصفحة من خلال إطار العرض.

لتبسيط الأمر، جميع وحدات بكسل العرض والارتفاع هي نفس مخرجات المخطوطة المرئية، ثم يتم تعيين إطار العرض ديناميكيًا من خلال نسبة عرض الصفحة إلى عرض المخطوطة المرئية. مرجع الكود الأساسي لنظام القياس:

 (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 } var width = docEl.clientWidth ||.360; var height = docEl.clientHeight ||.640; المحتوى = 'العرض=' + 360 + '، المقياس الأولي =' + مقياس الصفحة + '، max-scale=' +pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); } else { docEl.className += 'pc' }})()

لقد تم تطبيق هذا الحل في تصميم صفحة نشاط H5 في العام الماضي.

ومع ذلك، إذا كنت تريد عرضه على جهاز الكمبيوتر، نظرًا لعدم وجود مفهوم لقياس إطار العرض، فلا يمكن ضبطه إلا بقيمة ثابتة، وهو ليس مثاليًا.

لقد تم ذكر حل تكييف تخطيط العين بشكل متكرر ويستخدم على نطاق واسع في منتجات شركات الإنترنت الكبرى.

وببساطة الطريقة هي:

1. حساب حجم الخط لعلامة جذر HTML وتعيينه ديناميكيًا وفقًا لنسبة مسودة التصميم إلى عرض الجهاز؛
2. في CSS، يتم تحويل العرض والارتفاع والموضع النسبي وما إلى ذلك لعناصر مسودة التصميم إلى قيم بوحدات rem وفقًا لنفس النسبة؛
3. تستخدم الخطوط الموجودة في مسودة التصميم px كوحدة ويتم تعديلها قليلاً من خلال استعلامات الوسائط.

دعونا نعطي مثالا للتوضيح.

المشكلة الأولى هي الحساب الديناميكي لحجم الخط لعلامات HTML. يعتمد هذا على كيفية الاتفاق على نسبة التحويل. بأخذ عشرة أجزاء متساوية من عرض الصفحة كمثال، مرجع الكود الأساسي:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // احصل على عرض النافذة الحالية var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( العرض // أكبر من 1080 بكسل اضغط على 1080 إذا (العرض > ). 1080) { width = 1080 } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; parseFloat(win.getComputedStyle(docEl)[font-size]); 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);

بالإضافة إلى ذلك، بالنسبة لصفحات نشاط H5 بملء الشاشة، هناك متطلبات لنسبة العرض إلى الارتفاع، ويجب إجراء التعديلات في هذا الوقت. يمكنك القيام بذلك على النحو التالي:

 function AdjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); // خذ بعين الاعتبار شريط التنقل 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);}

باتباع طريقة القياس هذه، يمكن تحقيق تخطيطات دقيقة ذات قياس متناسب على أي جهاز تقريبًا.

المشكلة الثانية هي قيمة حجم العنصر.

بأخذ عرض مسودة التصميم كمثال 1080 بكسل، نقسم العرض إلى 10 أجزاء متساوية لسهولة التحويل، ثم 1rem = 1080 / 10 = 108 بكسل. طريقة التحويل هي :

 const px2rem = function(px, rem = 108) { Let remVal = parseFloat(px) / rem if (typeof px === string && px.match(/px$/)) { remVal += 'rem' }; إرجاع ريمفال؛}

على سبيل المثال، توجد صورة في مسودة التصميم بحجم 460 × 210 وموضع الصفحة النسبي في الأعلى: 321 بكسل على اليسار: 70؛. وفقًا لطريقة التحويل المذكورة أعلاه، يجب أن يكون نمط CSS النهائي للعنصر كما يلي:

 .img_demo { الموضع: حجم الخلفية: صورة الغلاف: url('demo.png'); الأعلى: 2.97222rem;

من خلال الطريقة المذكورة أعلاه، يتم تحقيق مخطط تخطيط العينة. لكن من الواضح أن حساب قيمة الريم يدويًا أمر غير واقعي.

باستخدام أداة المعالجة المسبقة less/sass، نحتاج فقط إلى ضبط طريقة mixins، ثم تعيين القيمة وفقًا للحجم الفعلي لمسودة التصميم. بأخذ أقل كمثال، مرجع mixins هو كما يلي:

 // px إلى rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@left, left, @rem); .px2rem(@width, width, @rem); .px2rem(@height, height, @rem);}

بالنسبة لعنصر المثال السابق، يمكن كتابة نمط CSS على النحو التالي:

 .img_demo { الموضع: حجم الخلفية المطلق: صورة الخلفية: url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

هنا، يمكن قراءة العرض والارتفاع مباشرة من حجم عنصر الصورة الناتج في مسودة التصميم؛ ويمكن الحصول بسرعة على قيم أعلى/يسار عن طريق تحريك الخط المرجعي لوضع العنصر في Photoshop.

سيؤدي تغيير حجم الخطوط باستخدام نسب rem إلى حدوث مشكلات في العرض، ما عليك سوى استخدام استعلامات الوسائط لتعيين أحجام متعددة.

مرجع المثال:

 // شاشة الوسائط المستجيبة للخط و(max-width: 321px) { body {font-size: 13px }}@media screen و(min-width: 321px) و(max-width: 400px) { body {font - الحجم: 14 بكسل؛ }}@ شاشة الوسائط و (العرض الأدنى: 400 بكسل) { الجسم { حجم الخط: 16بكسل; }}

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.