إتقان تصميم الويب سريع الاستجابة باستخدام وظائف الرياضيات في CSS

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

تأتي CSS مع ثلاث وظائف رياضية مفيدة ستغير الطريقة التي تصمم بها مواقع الويب الخاصة بك. سنوضح لك كيف ولماذا يجب عليك استخدامها.

إدخال الرياضيات إلى CSS

CSS هو إعلاني بشكل أساسي ، لكن التنقيحات أدخلت وظائف للغة. يوجد الآن العديد من الوظائف في المواصفات ، ويمكن أن تكون ثلاثة من أبسط العمليات الحسابية مفيدة جدًا: calc ، و max ، و min.

يمكنك استخدام هذا المثال CodePen البسيط للمساعدة في المتابعة مع الدليل.

CSS calc () دالة رياضية

تقوم وظيفة CSS calc () بإجراء عملية حسابية بسيطة وتستخدم النتيجة كقيمة خاصية. هذا يعني أنه يمكنك تعيين قيم ديناميكية لخصائص مثل الطول والعرض ، كل ذلك بدون استفسارات CSSmedia.

تدعم هذه الوظيفة الجمع (+) والضرب (*) والطرح (-) والقسمة (/) باستخدام عامل تشغيل واحد.

مثال: إنشاء مسافات متساوية عبر أحجام الشاشة

قد يكون من الصعب جعل صفحة الويب تبدو متشابهة بأحجام مختلفة ، حتى إذا كنت تستخدم وحدات CSS ديناميكية مثل vw و٪. تعمل وظيفة CSS calc () على تغيير هذا.

كما ترى في الصورة أعلاه ، فإن شريط العنوان الذي يمر عبر الشاشة له مسافات مختلفة حسب حجم الشاشة. هذا لأننا قمنا بتعيين العرض على 80vw ، وضبط التباعد على 20vw ؛ قيمة متغيرة.

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

العرض: احسب (100vw - 400px) ؛

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

CSS max () دالة الرياضيات

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

مثال: تقييد ارتفاع شريط التنقل

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

هذا يمكن أن يجعل قيمة العقار تبدو رائعة على سطح المكتب وسيئة على الهاتف المحمول ، تمامًا كما تظهر الصورة أعلاه. يبلغ ارتفاع شريط التنقل 10vh ، ولكن هذا يجعل الشريط يبدو رفيعًا على أجهزة سطح المكتب.

يمكننا استخدام دالة CSS max () لحل هذه المشكلة:

الارتفاع: الحد الأقصى (10vh ، 80 بكسل) ؛

بإضافة قاعدة مثل هذه ، يمكننا تعيين حد أدنى للارتفاع يبلغ 80 بكسل لشريط التنقل الخاص بنا ، مع الحفاظ على قيمة 10vh إذا كانت أعلى.

دقيقة CSS () دالة الرياضيات

تشبه الدالة min () وظيفة max () ، لكنها تختار أقل قيمة من مجموعة لتستخدمها كقيمة للخاصية.

مثال: تعيين الحد الأقصى لحجم النص

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

باستخدام أ حجم الخط: 10vh ؛ الخاصية الموجودة في نص العنوان الرئيسي في مثالنا تجعل النص يبدو رائعًا على سطح المكتب ، لكنه كبير جدًا على أجهزة الجوّال.

لتغيير هذا ، يمكنك استخدام وظيفة CSS min () لتوفير حجم بديل:

حجم الخط: min (10vh ، 10vw) ؛

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

استخدام الرياضيات لتصميم الويب سريع الاستجابة

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

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

كيفية إنشاء شريط تنقل سريع الاستجابة باستخدام HTML و CSS

اقرأ التالي

نبذة عن الكاتب