يعد التصميم التكيفي أحد المفاهيم الأساسية المستخدمة في تطوير مواقع الويب اليوم. في عالم اليوم ، عندما تتراوح أحجام شاشات الأجهزة المختلفة من الهواتف الذكية الصغيرة إلى الشاشات الضخمة ، من المهم للغاية إنشاء مواقع ويب تبدو جيدة بنفس القدر على جميع الأجهزة.
أحد عناصر التصميم المستخدمة بشكل متكرر هو مربع. يمكن استخدام الكتلة المربعة لأغراض مختلفة ، سواء كانت قائمة تنقل أو بطاقة منتج أو معرض صور. في هذه المقالة ، سوف ننظر إلى تعليمات خطوة بخطوة لإنشاء مربع التكيف في كس.
كس (أوراق الأنماط المتتالية) هي لغة ورقة أنماط تستخدم لوصف مظهر مستند مكتوب بلغة ترميز مثل هتمل أو شمل. باستخدام كس ، يمكنك تعيين أنماط مختلفة لعناصر صفحة الويب ، مثل لون النص وحجم الخط وتخطيط العنصر والمعلمات الأخرى.
- ما هو مربع التكيف ولماذا هو مطلوب?
- الخطوة 1: إنشاء حاوية لمربع
- الخطوة 1.1: تحديد حجم الحاوية
- الخطوة 1.2: تعيين لون خلفية الحاوية
- الخطوة 1.3: محاذاة مركز الحاوية
- الخطوة 2: إنشاء المربع نفسه
- الخطوة 2.1: تحديد حجم المربع
- الخطوة 2.2: ضبط الأنماط المربعة
- سؤال وجواب
- كيف يمكنني إنشاء مربع التكيف في المغلق?
- ما الخاصية المغلق يسمح لك لإنشاء مربع?
- ما هي أدوات البرمجة واللغات التي يمكن استخدامها لإنشاء مربع تكيفي?
- كيف يمكنني جعل مربع مع ارتفاع متغير اعتمادا على العرض?
ما هو مربع التكيف ولماذا هو مطلوب?
المربع التكيفي هو عنصر تصميم يغير شكله وحجمه اعتمادا على حجم الشاشة أو دقة الجهاز. عادة ما تستخدم المربعات التكيفية في تصميم الويب لإنشاء تخطيط مرن وسريع الاستجابة سيبدو جيدا على أي أجهزة وشاشات ، بما في ذلك أجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف الذكية.
يمكن أن يكون المربع التكيفي مفيدا لعدة أسباب:
- دعم الأجهزة المختلفة-باستخدام المربعات التكيفية ، يمكنك إنشاء صفحات ويب تبدو جيدة على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. هذا يزيد من سهولة الاستخدام ويحسن تجربة المستخدم ، بغض النظر عن الجهاز الذي يستخدمونه لزيارة موقعك.
- زيادة التحويل-يتيح لك استخدام مربع تكيفي إنشاء تخطيط أكثر جاذبية وسهل القراءة لموقعك. يمكن أن يؤدي ذلك إلى زيادة التحويل ، أي إلى زيادة عدد الزوار الذين يقومون بإجراءات مستهدفة ، مثل شراء منتج أو ترك معلومات الاتصال.
- تحسين تحسين محركات البحث-تقوم محركات البحث مثل جوجل بشكل متزايد بتقييم قدرة مواقع الويب على التكيف وملاءمة الأجهزة المحمولة عند ترتيب نتائج البحث. إذا كان موقعك يستخدم مربعا متكيفا ويتم عرضه بشكل مثالي على الأجهزة المحمولة ، فإن احتمال حصوله على مرتبة عالية في محركات البحث يزداد بشكل كبير.
- سهولة التطوير-يمكن تنفيذ المربع التكيفي باستخدام خصائص كس مثل استعلامات الوسائط ، والتي تسمح لك بتعيين أنماط مختلفة للأجهزة والشاشات المختلفة. هذا يجعل عملية التطوير أبسط وأكثر مرونة ، لأنها لا تتطلب إنشاء تخطيطات منفصلة لكل جهاز.
نتيجة لذلك ، يعد استخدام المربع التكيفي أحد العناصر الرئيسية لتصميم الويب الحديث ، والذي يسمح لك بإنشاء صفحات ويب مرنة وسريعة الاستجابة تبدو جيدة على أي جهاز وتحسين تجربة المستخدم.
الخطوة 1: إنشاء حاوية لمربع
لإنشاء مربع التكيف في كس ، وسوف نحتاج إلى حاوية التي سيتم وضع مربع نفسه.
لإنشاء حاوية ، يمكننا استخدام علامة
.
- إنشاء عنصر
- . حدد سمة الفئة وقم بتعيينها القيمة "حاوية".
يمكنك استخدام عرض خصائص كس والارتفاع ، أو تعيين أبعاد الحاوية مباشرة.
مثال:
.
في هذه الخطوة ، أنشأنا حاوية باستخدام علامة
وحدد فئتها وأبعادها باستخدام سمة الفئة وأنماط كس.
نحن الآن على استعداد للانتقال إلى الخطوة التالية ، حيث سنضيف أنماطا ونجعل مربعنا متكيفا.
- الخطوة 1.1: تحديد حجم الحاوية
- قبل البدء في إنشاء مربع التكيف في كس ، تحتاج إلى تحديد حجم الحاوية الخاصة به. يؤثر حجم الحاوية على حجم المربع الموجود بداخلها.
من المستحسن تعيين عرض وارتفاع الحاوية باستخدام خصائص العرض والارتفاع المغلق. سيؤدي ذلك إلى إنشاء مربع تكيفي يمتد أو يتقلص اعتمادا على حجم الحاوية.
| على سبيل المثال ، يمكنك تعيين الأبعاد التالية للحاوية: | العرض: 300 بكسل; | الارتفاع: 300 بكسل. |
|---|---|---|
| للقيام بذلك ، أضف الأنماط التالية إلى الحاوية: | محدد | الممتلكات |
| القيمة | .حاوية | العرض |
300 بكسل
.حاوية
الارتفاع
300 بكسل
وبالتالي ، سيكون للحاوية أبعاد 300 بكسل في العرض و 300 بكسل في الارتفاع.
| الخطوة 1.2: تعيين لون خلفية الحاوية | لإنشاء مربع التكيف باستخدام كس ، تحتاج إلى تعيين لون الخلفية للحاوية. يساعد لون الخلفية على تحديد المنطقة التي يشغلها المربع. |
| لتعيين لون الخلفية في كس ، يمكنك استخدام خاصية لون الخلفية وتعيين قيمة اللون بتنسيق ترميز سداسي عشري أو اسم اللون أو استخدام متغيرات كس. | نموذج التعليمات البرمجية لتعيين لون الخلفية للحاوية: |
الممتلكات
المعنى
لون الخلفية
# 0000
- في هذا المثال ، يتم تعيين لون الخلفية الأحمر للحاوية.
| يمكنك أيضا استكشاف قيم الألوان الأخرى واختيار القيم التي تلبي متطلبات التصميم الخاصة بك. | الخطوة 1.3: محاذاة مركز الحاوية |
| لجعل حاوية مربع التكيف لدينا تركزت على الصفحة ، يمكننا استخدام خصائص كس عرض: فليكس وتبرير المحتوى: مركز. | |
| أضف الأنماط التالية إلى كتلة كس للحاوية: | .حاوية |
- {
- عرض: فليكس;
تبرير-المحتوى: مركز;
}
عرض: فليكس; يضبط الحاوية على وضع تخطيط عنصر مرن ويسمح لك باستخدام خيارات المحاذاة.
جوسيفي-المحتوى: مركز ؛ محاذاة عناصر الحاوية أفقيا في المركز.
بعد إضافة هذه الأنماط ، يجب توسيط الحاوية ذات المربع التكيفي أفقيا على الصفحة.
الخطوة 2: إنشاء المربع نفسه
الآن بعد أن قررنا حجم ولون المربع ، دعنا نبدأ في إنشائه. للقيام بذلك ، سوف نحتاج إلى عنصر
هذا عنصر كتلة ويسمح لنا بإنشاء مستطيل على صفحة ويب.
دعونا إضافة التعليمات البرمجية التالية إلى ملف هتمل لدينا:
الآن لدينا عنصر
مع فئة" مربع". الطبقة يسمح لنا لربط عنصر مع أنماط معينة في كس. سوف نستخدم هذه الفئة لتعيين حجم ولون مربع لدينا.
ثم أضف الكود التالي إلى ملف كس الخاص بنا:
.مربع {
المغلق:
.مربع {
العرض: 200 بكسل;
الارتفاع: 200 بكسل;
لون الخلفية: # ف 0000;
}
في هذه المرحلة ، قمنا بالفعل بإنشاء المربع نفسه بالأبعاد واللون المحددين. ومع ذلك ، فإنه لم يتكيف بعد ولا يستجيب لتغيير حجم نافذة المتصفح. سنعمل على هذا في الخطوة التالية.
الخطوة 2.1: تحديد حجم المربع
لإنشاء مربع التكيف في كس ، تحتاج أولا إلى تعيين أبعادها. للقيام بذلك ، يمكنك استخدام خصائص العرض والارتفاع.
يمكن تعيين مربع كحجم ثابت باستخدام قيم بكسل دقيقة:
.مربع {
العرض: 200 بكسل;
الارتفاع: 200 بكسل;
}
يمكنك أيضا استخدام القيم النسبية لإنشاء مربع التكيف:
.مربع {
العرض: 50%;
الحشو-القاع: 50%;
}
في هذه الحالة ، يعتمد عرض المربع وارتفاعه على العنصر الأصل. العرض: 50 ٪ يعني أن عرض المربع سيكون مساويا لنصف عرض العنصر الأصل ، والحشو السفلي: 50 ٪ يخلق مسافة بادئة من الأسفل تساوي نصف عرض العنصر الأصل ، مما يؤدي إلى إنشاء شكل مربع.
الخطوة 2.2: ضبط الأنماط المربعة
لإنشاء مربع التكيف في كس ، وسوف نحتاج إلى بعض الأساليب.