ندرس مبدأ تشغيل وحدات em باستخدام مثال مهمة "تصميم أداة تحميل مسبقة مرنة"

أحب أن أتوصل إلى عناصر واجهة مختلفة ، وبمجرد أن أرغب في إنشاء برنامج تحميل مسبق.

لتنفيذه ، كنت بحاجة إلى العلامات التالية:

<div class="preloader"></div> 

وفقًا لفكرتي ، يتكون برنامج التحميل المسبق من مربعين: ساحة كبيرة بحجم 60 × 60 بكسل ومربع صغير - 15x15 بكسل.

نظرًا لأن المربع الكبير مخطط تفصيلي لمربع صغير ، فقد استخدمت عنصر div .prealoder لتنفيذه. لكن في ميدان متداخل ، كنت بحاجة إلى عنصر زائف من قبل.

 .preloader { width: 60px; height: 60px; border: 2px solid #fff; position: relative; } .preloader::before { content: ""; width: 15px; height: 15px; background-color: #fff; position: absolute; top: calc(50% - 7.5px); left: calc(50% - 7.5px); } 

بالنسبة للرسوم المتحركة ، كتبت السيناريو التالي:

 .preloader::before { animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } } 

بالإضافة إلى الشاشة الرئيسية ، كنت أرغب في إضافة أداة التحميل المسبق مع أبعاد المحيط 120 × 120 بكسل والمربع الداخلي 30 × 30 بكسل.

 .preloader_l { width: 120px; height: 120px; } .preloader_l::before { width: 30px; height: 30px; top: calc(50% - 15px); left: calc(50% - 15px); animation-name: preloader-l; } @keyframes preloader-l { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-30px, -30px, 0) scale(1); } 40% { transform: translate3d(30px, -30px, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1); } 60% { transform: translate3d(-30px, 30px, 0) scale(1); } } 

كل شيء اتضح كما هو مخطط لها. ذهبت لشرب الشاي ، وفكر لي أنه إذا كنت بحاجة إلى إضافة حجم آخر ، فسوف يتعين علي مرة أخرى الإشارة إلى الأحجام (العرض والارتفاع) والموضع (الأعلى واليسار) والنص المتحرك.

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

نتيجة لذلك ، سيتم تغيير الرمز على النحو التالي:

 /*  Xem  Xpx     em   px. */ .preloader { width: Xem; height: Xem; font-size: Xpx; } .preloader::before { width: Xem; height: Xem; animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-Xem, -Xem, 0) scale(1); } 40% { transform: translate3d(Xem, -Xem, 0) scale(1); } 50% { transform: translate3d(Xem, Xem, 0) scale(1); } 60% { transform: translate3d(-Xem, Xem, 0) scale(1); } } .preloader_l { font-size: Xpx; } 

الحل

لحل المشكلة ، تكون صيغة حساب em مفيدة لي:

 Vem = Vpx / Fs 

Vpx هي القيمة في px التي تم تعيينها مسبقًا. قيمة Fs هي رقم متطابق مناسب لتقسيم قيمة Vpx.

الآن يمكنك البدء في حساب الخصائص التالية:

 .preloader { width: 60px; height: 60px; } .preloader::before { width: 15px; height: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); } 

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

 Width(em) = 60px / 60px = 1em Height(em) = 60px / 60px = 1em 

 .preloader { width: 1em; height: 1em; font-size: 60px; } 

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

 Width(em) = 15px / 60px = 0.25em Height(em) = 15px / 60px = 0.25em Top(em) = 7.5px / 60px = 0.125em; Left(em) = 7.5px / 60px = 0.125em; 

 .preloader::before { width: 0.25em; height: 0.25em; top: calc(50% - 0.125em); left: calc(50% - 0.125em); } 

يبقى لتغيير القيم في البرنامج النصي للرسوم المتحركة.

 @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } } 

إذا نظرت إلى القيم دون النظر إلى العلامة ، فأنت بحاجة إلى ترجمة 15px فقط. لقد قمت بذلك بالفعل من قبل وتتوافق مع 0.25em.

 @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-0.25em, -0.25em, 0) scale(1); } 40% { transform: translate3d(0.25em, -0.25em, 0) scale(1); } 50% { transform: translate3d(0.25em, 0.25em, 0) scale(1); } 60% { transform: translate3d(-0.25em, 0.25em, 0) scale(1); } } 

يمكنك الآن ضبط الحجم على 120 بكسل للعنصر .preloader_l.

 .preloader_l { font-size: 120px; } 

تجدر الإشارة إلى أنني قمت بإزالة قاعدة CSS .preloader_l :: قبل ونص الرسوم المتحركة preloader-l لأنه لم تعد هناك حاجة إليها.

واجب منزلي

من أجل توحيد هذه الخدعة ، قمت بإعداد مهمة. يتطلب ترجمة القيم من px إلى em ، والتي يتم استخدامها في البرنامج النصي للرسوم المتحركة. يتم الاحتفاظ بجميع قيم الممتلكات المحسوبة سابقا.

 @keyframes preloader { 0%, 70%, 100% { transform: translate3d(0, 0, 0) scale(0); } 10%, 60% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(9px, -21px, 0) scale(1); } 30% { transform: translate3d(3px, 21px, 0) scale(1); } 40% { transform: translate3d(-9px, -21px, 0) scale(1); } 50% { transform: translate3d(-9px, 21px, 0) scale(1); } }