شرح تفصيلي لاستخدام rem+scss للتكيف على الهاتف المحمول

يشير rem (حجم خط العنصر الجذر) إلى وحدة حجم الخط بالنسبة إلى العنصر الجذر (أي عنصر html).

بافتراض أن حجم خط العنصر الجذر هو 10 بكسل، فإن حجم 5rem هو 5*10=50 بكسل، على سبيل المثال

 html{ حجم الخط: 10px;}p{ العرض: 2rem; /* 2*10 = 20px;*/ الهامش: 1rem;}

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

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

أولاً، يقوم js بتعيين حجم الخط الافتراضي لـ html (المكتوب في رأس html)

 <script type=text/javascript> var bodyElement = document.documentElement ||.document.body, RC = { w: 750, h: 1206 }, // عرض وارتفاع مسودة التصميم الافتراضي GC = { w: document.documentElement.clientWidth |. window.innerWidth ||. screen.width, h: document.documentElement.clientHeight || screen.height }; function setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // الافتراضي 16 هو أن حجم الخط الافتراضي لـ html هو 16px html = document.getElementsByTagName(html)[0]; if(rightSize >currentSize){ // شاشة طويلة lastHTMLSize = 16;else if(rightSize <currentSize){ // شاشة عريضة lastHTMLSize = (RC.h / GC.h * GC w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

قم بتعيين ملف scss px إلى rem

 // الافتراضي 16 هو حجم الخط الافتراضي لـ HTML // الافتراضي 750 هو العرض الافتراضي لمسودة التصميم // $n هي المسافة المقاسة من مسودة التصميم @charset UTF-8 @function rem($n) { @return $n / (750/16)+rem;}

تحرير الوظائف لسهولة الاتصال:

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { // تغيير الموضع: اليسار المطلق: 50%; الأعلى: rem($top); mixin centerlt($left, $top) { // موضع الوسط لأعلى ولأسفل ولليسار ولليمين: اليسار: 50% العلوي: 50% الهامش: getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { // موضع الوسط لأعلى ولأسفل ولليسار ولليمين: اليمين المطلق: 50% top: 50% هامش: getTop($top) getRight ($right) 0 0;}@mixin middlert($right, $top) { // تغيير الموضع الأيمن لأعلى ولأسفل: اليمين المطلق: rem($right); أعلى $) 0 0 0;}@mixin centerb($left, $bottom) { // تغيير الموضع: اليسار المطلق: 50%; leftTop($left, $top) { // تغيير الموضع من اليسار إلى الأعلى: اليسار المطلق: rem($left top: rem($top);}@mixin rightTop($right, $top) { // تغيير اليمين إلى الموضع: اليمين المطلق: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { // تغيير اليمين إلى الموضع: مطلق; اليسار: ريم($أسفل)؛ ريم($أسفل);}

استدعاء الوظيفة المذكورة أعلاه (يمكن قياس مسافة العرض والارتفاع بـ ps لقياس المسافة الفعلية. عرض مسودة التصميم الافتراضي هو 750):

 .page1-img1 { العرض: rem (473)؛ الارتفاع: rem (173)؛ @include centerlt (139، 767)؛}

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