هناك أنواع عديدة من الهواتف المحمولة اليوم، ناهيك عن سلسلة iPhone، وهناك أنواع لا حصر لها من هواتف Android، لذلك من المستحيل كتابة مجموعة من أنماط التخطيط لكل هاتف محمول، وهذا مستحيل أيضًا، ولكن بالنسبة للواجهات الأمامية التي تسعى بشكل متزايد لتحقيق التميز قال، بطبيعة الحال، لإيجاد حل معقول. يتم استخدام rem للتخطيط التكيفي.
التأثير الذي سيتم تحقيقه عن طريق التكيف هو كما هو موضح أدناه (عرض توضيحي بسيط)
يشغل القسمان نصف الشاشة بغض النظر عما إذا كانا على شاشة كبيرة أو شاشة صغيرة.
على الرغم من إمكانية تحقيق الاستخدام البسيط المذكور أعلاه للنسب المئوية، إلا أن النسب المئوية لا يمكنها تحقيق تكييف الخط، ولا يزال من الصعب تحويل النسب المئوية إلى أحجام مقابلة. بعد ذلك، دعونا نتحدث عن بطل الرواية لدينا هذه المرة (عادة ما نتكيف فقط مع العرض)
تحليل مبدأ ريمبادئ ذي بدء، rem هي وحدة نسبية تتعلق بحجم الخط للعنصر الجذر، أي أن 1rem يساوي حجم الخط في html. وبعد ذلك، نحتاج فقط إلى تغيير حجم الخط لعنصر html للتحكم في حجم الخط حجم الريم بعد ذلك، كيف يمكننا التكيف مع الشاشات المختلفة؟ طالما أننا نتأكد من أنه كلما زاد عرض الشاشة، زادت قيمة px التي يمثلها 1rem وكلما زادت قيمة حجم الخط في HTML إلى عرض الشاشة.
دعونا نتحدث عن بعض المفاهيم: نسبة بكسلات الجهاز ، ووحدات البكسل الفعلية للجهاز ، ووحدات البكسل المستقلة عن الجهاز (تسمى أحيانًا وحدات البكسل الافتراضية)
نسبة بكسلات الجهاز = وحدات البكسل الفعلية للجهاز/وحدات البكسل المستقلة للجهاز
البكسل الفعلي للجهاز: أصغر وحدة معروضة على الجهاز
وحدات البكسل المستقلة عن الجهاز: وحدات مستقلة عن الجهاز تُستخدم لقياس وحدات البكسل بشكل منطقي (أبعاد CSS).
خذ iphone6/7/8 كمثال. وحدات البكسل الفعلية لجهاز iphone6/7/8 هي 750، وهو الحجم الفعلي للجهاز، وpx هي وحدة بكسل مستقلة لجهاز iphone6/7/8 الشاشة، وحجمها CSS هو 375، وتكون نسبة بكسلات الجهاز مضبوطة بالفعل عندما يغادر الجهاز المصنع. فكيف نحقق التكيف؟
يستخدم هذا rem الأكثر شيوعًا
خطة تنفيذ ريمأولاً، وفقًا لوحدات البكسل الفعلية للجهاز على الشاشات المختلفة، يجب تعيين أحجام بكسل مختلفة باستخدام حجم الخط لعنصر html.
1. استفسار وسائل الإعلام
html{font-size:16px;}@media screen and (min-width:240px) { html {font-size:9px }}@media screen and (min-width:320px) {html {font-size:12px; ;}}@شاشة الوسائط و(الحد الأدنى للعرض:375 بكسل) {html{font-size:14.0625px;}}استخدم @media screen و(min-width:XXX) لتحديد حجم الجهاز، ثم قم بتعيين حجم الخط لـ html
2. يقوم js بتعيين حجم الخط لـ html (حل NetEase)
دالة setRem () { Let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()يعتمد الكود أعلاه على iphone6 كمسودة تصميم، والنتيجة هي البكسل الفعلي الذي يبلغ 1rem = 100 بكسل نظرًا لأن نسبة بكسلات جهاز iphone6 هي 2، و1rem هي 50 بكسل في معاينة المتصفح، مما يعني أن العلاقة بين 1rem وعرض الجهاز هي 7.5 مرة، وسيتغير الحجم الفعلي إذا تغير عرض الجهاز بمقدار 1rem، ولن تتغير النسبة على الشاشة. (معظم الحلول الموجودة في السوق من هذا النوع)
3. استخدم فولكس فاجن، vh
أتش تي أم أل {حجم الخط: 10vw}vw وvh هما وحدتان نسبيتان جديدتان تقسمان المنطقة المرئية إلى 100 جزء من العرض والارتفاع، على غرار تخطيط النسبة المئوية. لا يتطلب هذا الحل كتابة js، لكن التوافق ضعيف بعض الشيء.
مرفق أدناه جدول التوافق vw و vh
يرتبط كل rem بحجم خط العنصر الجذر، لذا يتم بذل كل الجهد لتعيين حجم خط العنصر الجذر بما يتناسب مع عرض الجهاز
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.