❗️طرق جعل موقعك متجاوب ب CSS❗️
يشير تصميم الويب سريع الاستجابة الى إنشاء مواقع ويب تعمل بشكل جيد على أجهزة الجوال والأجهزة اللوحية وسطح المكتب
هناك الكثير من الطرق لجعل موقعك اكثر تجاوباً، لنتعلم اكثر عنها👇
يشير تصميم الويب سريع الاستجابة الى إنشاء مواقع ويب تعمل بشكل جيد على أجهزة الجوال والأجهزة اللوحية وسطح المكتب
هناك الكثير من الطرق لجعل موقعك اكثر تجاوباً، لنتعلم اكثر عنها👇
1⃣ قم بتعيين نقاط توقف Breakpoints مستجيبة مناسبة:
نقطة التوقف هي النقطة التي يتكيف فيها محتوى وتصميم موقع الويب بطريقة معينة من أجل توفير أفضل تجربة مستخدم ممكنة
تستخدم Media Queries لهذا الغرض
نقطة التوقف هي النقطة التي يتكيف فيها محتوى وتصميم موقع الويب بطريقة معينة من أجل توفير أفضل تجربة مستخدم ممكنة
تستخدم Media Queries لهذا الغرض
2⃣ ضع شاشات اللمس في الاعتبار:
بطبيعة الحال، سيتعين على موقع الويب معايرة نفسه للوصول إليه عبر شاشات اللمس
الان اصبحت بعض شاشات اللابتوب قابلة للتحكم باللمس وليس الهاتف فقط
مثال: لنفترض أن هناك قائمة منسدلة على الصفحة الرئيسية
بطبيعة الحال، سيتعين على موقع الويب معايرة نفسه للوصول إليه عبر شاشات اللمس
الان اصبحت بعض شاشات اللابتوب قابلة للتحكم باللمس وليس الهاتف فقط
مثال: لنفترض أن هناك قائمة منسدلة على الصفحة الرئيسية
في عرض سطح المكتب يجب أن يكون كل عنصر من عناصر القائمة كبيرا بدرجة كافية بحيث يمكن الضغط عليه بأطراف إصبع من شاشة تعمل باللمس
على شاشات الهاتف المحمول، يجب أن يكون من السهل أيضا اكتشاف العناصر الأصغر مثل الأزرار وتحديدها
على شاشات الهاتف المحمول، يجب أن يكون من السهل أيضا اكتشاف العناصر الأصغر مثل الأزرار وتحديدها
3⃣ حدد طريقة الكتابة Typography:
بشكل عام ، يحدد مطورو الويب أحجام الخطوط بالبكسل px وتعمل هذه على مواقع الويب الثابتة، لكن مواقع الويب المستجيبة تحتاج إلى خط متجاوب
في مواصفات CSS3 ، ابحث عن الوحدة المسماة rem، إنها مشابهه لوحدة em ولكنها تعمل Relative إلى عناصر HTML
بشكل عام ، يحدد مطورو الويب أحجام الخطوط بالبكسل px وتعمل هذه على مواقع الويب الثابتة، لكن مواقع الويب المستجيبة تحتاج إلى خط متجاوب
في مواصفات CSS3 ، ابحث عن الوحدة المسماة rem، إنها مشابهه لوحدة em ولكنها تعمل Relative إلى عناصر HTML
4⃣ اختبار الاستجابة على الأجهزة الحقيقية:
الشيء الذي غالبًا ما يتم تجاهله هو ضرورة الاختبار على أجهزة حقيقية
بمجرد تطوير الموقع، ضعه من خلال مدقق تصميم سريع الاستجابة
يقدم BrowserStack عددا من أحدث الأجهزة الحقيقية التي يمكن من خلالها التحقق من شكل موقع الويب
الشيء الذي غالبًا ما يتم تجاهله هو ضرورة الاختبار على أجهزة حقيقية
بمجرد تطوير الموقع، ضعه من خلال مدقق تصميم سريع الاستجابة
يقدم BrowserStack عددا من أحدث الأجهزة الحقيقية التي يمكن من خلالها التحقق من شكل موقع الويب
5⃣ استخدام خاصية Flex-wrap:
يوفر استخدام flexbox الكثير من الخواص التي تمكنك من ترتيب عناصرك
يمكنك ترتيب عناصرك باستخدام flex-wrap كما هو موضح في الصورة👇
يوفر استخدام flexbox الكثير من الخواص التي تمكنك من ترتيب عناصرك
يمكنك ترتيب عناصرك باستخدام flex-wrap كما هو موضح في الصورة👇
6⃣ Box-sizing:
يحل الكثير من المشاكل التي تسببها الحشو، فإن استخدام حجم الصندوق في عناصر HTML مع عرض النسبة المئوية سيأخذ الحشو في الاعتبار بدلاً من الاضطرار إلى ضبط العرض بسبب الحشو
box size: border box;
يحل الكثير من المشاكل التي تسببها الحشو، فإن استخدام حجم الصندوق في عناصر HTML مع عرض النسبة المئوية سيأخذ الحشو في الاعتبار بدلاً من الاضطرار إلى ضبط العرض بسبب الحشو
box size: border box;
هل تعلمت امر جديد؟ لا تنس اعادة التغريد حتى يستفيد الجميع🙏
جاري تحميل الاقتراحات...