5 نصائح مفيدة لإنشاء تخطيطات سريعة الاستجابة

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

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

1. ابدأ بورقة الأنماط العامة

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

بعد الانتهاء من التصميم العام ، يمكنك بعد ذلك البدء في إنشاء التخطيط واستهداف العناصر الفردية داخل التخطيط. في الأساس ، ابدأ من الأعلى ثم انتقل إلى العناصر.

مثال CSS التالي يعيد تعيين الهامش على جميع العناصر إلى 0 ، ويحدد الطباعة والألوان لجميع العناوين الرئيسية ، ويضيف هامشًا ثابتًا لكل منهم:

جسم,
h1,
h2,
h3,
ص {
هامِش: 0;
}
h1,
h2,
h3 {
لون: أزرق;
خط العائلة: "فيردانا" بلا الرقيق;
وزن الخط: 900;
ارتفاع خط: 1;
}
h2,
h3,
ص {
الهامش السفلي: 1rem;
}

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

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

2. تجنب الأحجام الثابتة

عندما تبدأ في التفكير في التخطيطات ، فإن أول شيء يجب أن تضعه في اعتبارك هو تجنب الأحجام الثابتة. الأحجام الثابتة تشير إلى خصائص مثل العرض: 1000 بكسل, الارتفاع: 200 بكسل، وما إلى ذلك وهلم جرا. لن يؤدي تحديد ارتفاع أو عرض ثابت إلا إلى حدوث مشكلات على المدى الطويل.

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

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

هذا هو نفسه ل ارتفاع. على سبيل المثال ، افترض أنك قمت بتعيين ملف ارتفاع من رأس إلى قيمة ثابتة 200 بكسل.

رأس {
ارتفاع: 200مقصف;
عرض: شبكة;
مكان العناصر: مركز;
}

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

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

هذا هو واحد من أخطاء CSS الأكثر شيوعًا التي يجب تجنبها.

3. تذكر أن موقع الويب الخاص بك يستجيب بشكل افتراضي

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

بالطبع ، يمكن أن تتجاوز الصور ، وقد يكون النص صغيرًا جدًا. لكنك لن تفقد أي شيء بالتخطيط الافتراضي. لن ينكسر النص الخاص بك ، وستكون جميع العناصر مرئية على الشاشة.

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

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

هنا سيناريو واحد. تخيل أن العنصر الذي يحمل اسم فئة.ينقسم يحتوي على ثلاثة عناصر بداخله. باستخدام CSS التالي ، سيتم إنشاء تخطيط من ثلاثة أعمدة:

.ينقسم {
عرض: ثني;
الاتجاه المرن: صف;
فجوة: 2rem;
}

في الشاشات الأصغر (40em واسع أو أقل) ، فأنت تريد أن يشغل كل شيء عمودًا واحدًا. لذلك ستفعل هذا:

@وسائط(أقصى عرض: 40em) {
.ينقسم {
عرض: حاجز;
 }
}

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

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

@وسائط(أقصى عرض: 40em) {
.ينقسم {
عرض: ثني;
الاتجاه المرن: صف;
فجوة: 2rem;
 }
}

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

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

5. استفد من CSS الحديث

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

إحدى الطرق للقيام بذلك هي:

h1 {font-size: clamp (3rem، 1rem + 10vw، 7rem)}

هذا المشابك h1 بين الحد الأدنى والحد الأقصى لحجم الخط. أصغر ما نريده هو 3 ريم والأعلى هو 7rem. الوسط هو ما سنكرره (1rem + 10 فولكس فاجن). ونتيجة لذلك ، سيتقلص العنوان تلقائيًا عندما يصبح إطار العرض أصغر وينمو كلما أصبح أكبر.

تعرف على المزيد حول Modern CSS

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