باستخدام Min () و Max () في Divi 5 لإنشاء تخطيطات ذكية

CSS MIN () و MAX () هما وظيفتان متعدد الاستخدامات ولكنه غير مستغلين في تصميم الويب المستجيب ، ولديه DIVI 5 دعمًا كاملاً لكلا من تحديث الوحدات المتقدمة. على الرغم من أننا قد استكشفنا سابقًا طباعة السوائل مع Clamp () والحسابات الديناميكية مع CALC () و MIN () و MAX () تمنحك طرقًا أبسط لتحقيق تصميم مستجيب.

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

CSS MIN () و MAX (): تخطيطات أكثر ذكاءً مع منطق أبسط

إذا كنت قد استكشفت بالفعل Clamp () ، فأنت في منتصف الطريق إلى إتقان Min () و Max ()! إذا كنت تتذكر ، فإن Clamp () يستخدم ثلاث قيم في وقت واحد (دقيقة ، مفضلة ، و Min) ، Min و Max في clamp () هو نفس المفهوم ولكن مع 1/3 فقط من المنطق في وقت معين.

ماذا تفعل min () و max ()؟

تتيح لك وظائف MIN () و MAX () تعيين قيمتين أو أكثر ، مع عرض أصغر (دقيقة) أو أكبر واحد (بحد أقصى) على أساس حجم الشاشة.

يتم تحديد "نقطة الانتقال" ذات الصلة بالقيمتين اللتين حددتهما ، لذلك هذا فقط لأغراض التصور

min (): يختار دائمًا القيمة الأصغر

استخدم min () لمنع شاشات واسعة من تمديد المحتوى بشكل مفرط. هذا مثالي للتخطيطات التي لا ينبغي أن تنمو على نطاق واسع على شاشات كبيرة ولكن يجب أن يكون لديها الكثير من المرونة لتوسيع نطاق لأسفل مع تزايد أحجام الشاشة.

 width: min(100%, 500px); 

في هذا المثال ، لن يتجاوز عرض العنصر 500 بكسل ، ولكن سيكون 100 ٪ إذا كان تحت علامة 500 بكسل.

Max (): يختار دائمًا القيمة الأكبر

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

 width: max(80%, 300px); 

في هذا المثال ، سيكون عرض العنصر دائمًا هو الخيار الأكبر: 80 ٪ من الحاوية أو 300 بكسل. على شاشات أصغر أو في حاويات ضيقة ، إذا كان 80 ٪ يحسب إلى أقل من 300 بكسل ، فسيظل العنصر عرضًا على الأقل 300 بكسل. على الشاشات الأكبر ، سيتوسع العنصر إلى 80 ٪ من عرض الحاوية ، ولكنه لا يتقلص أبدًا أقل من 300 بكسل. يساعد هذا النهج في ضمان بقاء العنصر قابلاً للاستخدام على الشاشات الصغيرة أثناء التحجيم بشكل استجابة على الشاشات الكبيرة.

لماذا الجمع بين القيم النسبية والثابتة في min () و max ()؟

عندما تواجه لأول مرة min () أو max () في CSS ، قد تتساءل عن سبب تجمعها في كثير من الأحيان بين القيم مثل النسبة المئوية والبكسل. ذلك لأن كل نوع وحدة يلعب دورًا مختلفًا في التصميم المستجيب.

على سبيل المثال ، سيتم حل Min (100px ، 200px) دائمًا إلى 100 بكسل. إنه مجرد اختيار أصغر قيمتين ثابتتين. ولكن عندما تخلط الوحدات ، مثل Min (100 ٪ ، 500px) ، فأنت تخبر المتصفح: "استخدم أيهما أصغر بين 100 ٪ من عرض الوالد و 500 بكسل." هذا يجعلها تستجيب.

تعدل الوحدات النسبية مثل ٪ و VW و EM بناءً على السياق - سواء كان هذا هو العنصر الأصل أو منفذ العرض أو أحجام الخطوط الموروثة. تبقى وحدات ثابتة مثل PX ثابتة في CSS ، مما يجعلها يمكن التنبؤ بها.

من خلال الجمع بين القيم الثابتة والنسبية ، يتيح لك MIN () و MAX () بناء تصميمات مرنة تتكيف مع عدم تطبيق حدود الحجم.

كيفية استخدام min () و max () مع divi

الآن وقد قمنا بتغطية أساسيات Min () و Max () ، دعنا نناقش بعض الأمثلة.

1. عرض الصف المتجاوب مع عدد أقل من الحقول

كنت دائمًا قادرًا على ضبط عرض وعرض أقصى على عناصر الحاويات مع Divi. ولكن من خلال فتح وظائف CSS مثل Min () و Max () ، يمكنك القيام بنفس الشيء ولكن استخدام حقل تصميم أقل (وإخراج CSS أقل قليلاً على صفحتك أيضًا).

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

هذا مثل استخدام CSS مثل هذا للصفوف:

 .container {
width: 95%;
max-width: 900px;
} 

مع الوحدات المتقدمة لـ Divi 5 ، لديك الآن خيار آخر موحد. يمكنك إدخال كل ما تحتاجه في حقل العرض فقط وتحقيق نفس النتيجة.

هذا مثل استخدام CSS على حاوية الصف:

 .container {
width: min(95%, 900px);
} 

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

هذه حالة الاستخدام الخاصة هذه ليست كلها مثيرة ، لكنها تُظهر قوة Min () و Max () وكيف يمكن أن تحل محل إعلانات CSS الأقدم.

عند استخدام MIN () أو MAX () للتباعد أو التحجيم أو الحدود (يمكن استخدامها في المزيد من الحقول في DIVI 5) ، أوصي بشدة بتعيينها في أي من المسبقة لمجموعة الخيارات أو الإعدادات المسبقة للعناصر. بهذه الطريقة ، يمكنك الحصول على تحجيم ثابت بغض النظر عن المكان الذي تستخدمه.

2. حشوة الصف وعرض الحدود

أدناه ، لدي تصميم يستدعي المزيد من الحشوة الداخلية وعرض الحدود الأكبر حيث تزداد أحجام الشاشة. لاستيعاب هذا ، استخدمت وظيفة Max () لضبط عرض الحدود اليمنى/اليسار/الأعلى/القاع والحشو على صف واحد. سيكون CSS شيء من هذا القبيل:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

هذا يعني أن وظيفة Max () ستختار أيهما أكبر في أي موقف يتم تطبيقه عليه. أصغر حشوة على كل جانب هي 10 بكسل والأكبر هي 2VW. وبالمثل ، بالنسبة لعرض الحدود ، فإن أصغرها على الإطلاق ستكون 5 بكسل ، والأكبر هي 1VW).

إليك ما يبدو عليه Max () في هذا الموقف في التصميم> التباعد> الحشو على الصف في Divi:

إليك ما يبدو عليه Max () في هذا الموقف في التصميم> الحدود>عرض الحدودعلى الصف في Divi:

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

هذا يساعد على زيادة توافر الشاشات الأصغر ، في حين أن الشاشات الأوسع يمكن أن تملأ المساحة أكثر.

3. أقسام بطل الارتفاع الكامل

باستخدام قيمة MIN () على ارتفاع القسم ، يمكنك إنشاء قسم بطل لا يقل عن ارتفاع معين ولكنه يناسب 90 ٪ من الارتفاع الكامل (وليس أكثر) باستخدام دالة MIN () بسيطة.

 height: min(800px, 90vh) 

هذا له تأثير على وجود قسم بطل كامل الارتفاع باستثناء شاشات أكبر (أطول) ، والتي من شأنها أن تعرض القسم التالي أسفله. في إعدادات تحجيم Divi ، يمكن القيام بذلك باستخدام مدخلتين مختلفتين للمجال (العرض و Max-Width) ، ولكن باستخدام وظيفة MIN () ، يمكننا الحصول على نفس التأثير باستخدام حقل واحد فقط في التحجيم.

إنه يحافظ على قسم البطل باعتباره الشيء الرئيسي لمعظم أحجام الشاشة ولكنه لا يصبح كبيرًا جدًا في الحالات القليلة مع قرارات الشاشة الأطول.

4. تحجيم الخط

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

1Rem يساوي حجم الخط الجذر (عادة 16 بكسل ما لم يتم تخصيصه في أنماط موقعك) ؛ سيأخذ حجم الخط من الحد الأقصى (1REM ، 2VW) أكبر من القيمين ولن يكون أصغر من 16 بكسل.

كما ترون ، على أصغر الأجهزة ، يتم ضبط حجم الخط على 1REM/16px. في مرحلة معينة ، تصبح القيمة الأكبر 2VW وتقيس حجم الخط لأعلى ، مما يجعل الخط أكبر مع زيادة حجم الشاشة.

بالنسبة لتحجيم الخطوط ، لا أوصي باستخدام Min أو Max ولكن بدلاً من ذلك clamp (). يمنحك MIN/MAX فقط تحجيمًا ديناميكيًا في اتجاه واحد فقط ، ولكي تقترب من تأثير المشبك () ، ستحتاج إلى ضبط قواعد حجم خطوط MIN/MAX عند نقاط توقف متعددة (وهو أمر ممكن ولكن أسهل بكثير لاستخدام المشبك).

الفرق بين min ()/max () و clamp ()

يمكنك فهم المشبك () كمجموعة من min () و max () مع قيمة مفضلة بينهما. يأخذ Clamp () قيمة واحدة للحد الأدنى من الحد الأقصى ، والقيمة واحدة كحد أقصى للكبس ، والقيمة الثالثة (في الوسط) كقيمة مفضلة تحدد ميل التغيير بين MIN و MAX.

مثال:

 font-size: clamp(16px, 4vw, 40px); 

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

اقرأ مقالتي المخصصة حول استخدام المشبك () لرؤية مولد طباعة السوائل المفضل لدي الذي ينشئ وظائف المشبك () لك.

جرب Min () و Max () مع Divi 5

قد لا يحصل Min () و Max () على الكثير من الاهتمام مثل المشبك () أو calc () ، لكنهما أدوات أساسية لتصميمات أكثر ذكاءً وأبسطًا ونظافة في Divi 5.

تمنحك وظائف CSS طرقًا فريدة للتحكم في استجابة موقع الويب الخاص بك. بمجرد أن تفهم متى تستخدم Min () و Max () ، ستتساءل كيف تمكنت من التصميم المستجيب بدونها. إنها مدعومة بالكامل عبر المتصفحات الحديثة ، و Divi يجعل تنفيذها واضحًا. Divi 5 جاهز للاستخدام على مواقع الويب الجديدة.