لقد قمت مؤخرًا بفرز ملاحظاتي من دراساتي السابقة للواجهة الأمامية ووجدت أنني لا أفهم حقًا جانب تكييف الشاشة (rem) لويب الهاتف المحمول، فأنا أعرف فقط كيفية استخدامها.
بعد ذلك، قم بتسجيل بعض أفكارك حول تكييف شاشة الويب للجوال (rem).
مقدمة إلى ريميمثل rem حجم حجم الخط للعنصر الجذر (<html>). أي أنه إذا كان حجم خط العنصر الجذر هو 14 بكسل، فإن 1rem = 14 بكسل
rem يتكيف مع الويب المحمول تأثير التكيفعلى الشاشات ذات الأحجام المختلفة، لا يبدو حجم نفس العنصر هو نفسه، ولكن نسبة عرض الشاشة التي تشغلها هي نفسها.
شفرة
// في علامة الرأس لملف html <script type=text/javascript> (function(){ var html = document.documentElement; // احصل على عرض الشاشة (px) var hWidth = html.getBoundingClientRect().width; // اضبط حجم الخط لعلامة html على hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // في أقل/* حدد المتغير @r: 750/15 */@r:50rem { width: 100/@r; الارتفاع: 200/@r;} كود جافا سكريبتأولاً، نقوم بنسخ 1/15 من حجم الشاشة (px) إلى سمة حجم الخط لعلامة html. عند هذه النقطة، 1/15 بكسل من حجم الشاشة (px) يساوي حجم 1rem على أي حجم شاشة. أي: في أي حجم شاشة، طالما تم تعيين نفس قيمة rem للعنصر، فإن العنصر سيشغل نفس النسبة من عرض الشاشة على جميع أحجام الشاشات، وستكون النسبة هي نفسها، وسوف تتكيف مع جميع أحجام الشاشة.
رمز أقلالآن تحتاج فقط إلى تحويل وحدة px للعنصر الموجود في مسودة التصميم إلى وحدة rem.
لذلك، في هذا الوقت، يمكننا اعتبار مسودة التصميم بمثابة شاشة هاتف محمول بحجم معين.
في مثالي، عرض مسودة التصميم هو 750 بكسل.
لذلك، 750/15 = 50 بكسل، أي في شاشة الهاتف المحمول بحجم مسودة التصميم، 1rem = 50 بكسل.
ثم، في الكود الأقل، نحدد المتغير @r.
يتم قياس عرض div بـ 100 بكسل، لأنه في الشاشة بحجم مسودة التصميم، 1rem = 50 بكسل، وبالتالي فإن قيمة rem لـ div هي: 100/50 rem، أي 100/@r.
يتم قياس ارتفاع div بـ 200 بكسل، لأنه في الشاشة بحجم مسودة التصميم، 1rem = 50 بكسل، وبالتالي فإن قيمة rem لـ div هي: 200/50 rem، أي 200/@r.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.