شرح تفصيلي لطريقة تكييف تخطيط صفحة HTML5

الطرق الرئيسية هي:

1. حساب حجم الخط لعلامة جذر HTML وتعيينه ديناميكيًا وفقًا لنسبة مسودة التصميم إلى عرض الجهاز؛
2. في CSS، يتم تحويل العرض والارتفاع والموضع النسبي وما إلى ذلك لعناصر مسودة التصميم إلى قيم بوحدات rem وفقًا لنفس النسبة؛
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 = 'onorientationchange' in win ? timer = null win.addEventListener(evt, function () { ClearTimeout(timer); timer = setTimeout(setFontSize, 300); // تهيئة setFontSize();}(نافذة، مستند));

نسخة دقيقة للغاية:

 (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'; .getComputedStyle(docEl)[font-size]); if (actualSize !== rem && actalSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actlSize; docEl.style.fontSize = remScaled + 'px' } } var timer; = setTimeout(setFontSize, 100); // تحديث النافذة يغير حجم الخط ديناميكيًا WIN.addEventListener('resize', dbcRefresh, false); // احسب مرة واحدة عند عرض الصفحة WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)// بالنسبة لصفحات دفع نشاط H5، تكون نسبة العرض والارتفاع مطلوبة، وتضبط الوظيفة Warp(warpId = '#warp') { const $win = $(window); const height = $win.height(); Let width = $win.width(); // خذ بعين الاعتبار شريط التنقل if (width / height < 360 / 600 ) { return } width = Math.ceil(height * 360 / 640); $(warpId).css({ height, width,position: 'relative', top: 0، يسار: 'تلقائي'، الهامش: '0 تلقائي' }); // إعادة حساب العينة window.setFontSize(width);}

سهل الاستخدام ولكنه يفتقر إلى المرونة، يرجى مشاهدة العرض التوضيحي وسوف تفهم.

 شاشة الوسائط و( الحد الأدنى للعرض: 320 بكسل){html{font-size:50px}}شاشة الوسائط و( الحد الأدنى للعرض: 360 بكسل){html{font-size:56.25px}}شاشة الوسائط و( الحد الأدنى- العرض: 375 بكسل){html{font-size:58.59375px}}@شاشة الوسائط و(min-width: 384 بكسل){html{font-size:60px}}شاشة الوسائط و( الحد الأدنى للعرض: 400 بكسل){html{font-size:62.5px}}شاشة الوسائط و( الحد الأدنى للعرض: 414 بكسل){html{font- الحجم: 64.6875 بكسل}}@شاشة الوسائط و (الحد الأدنى للعرض: 424px){html{font-size:66.25px}}شاشة الوسائط و( الحد الأدنى للعرض: 480 بكسل){html{font-size:75px}}شاشة الوسائط و( الحد الأدنى للعرض: 540 بكسل){html{font- الحجم: 84.375 بكسل}}@شاشة الوسائط و (الحد الأدنى للعرض: 640 بكسل){html{حجم الخط:100px}}

يمكن تعديله بشكل مناسب وفقًا لاحتياجات المشروع الشخصية وتصميم المنتج. طريقة الكتابة التجريبية المذكورة أعلاه ليست فريدة وثابتة.

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