كيفية إنشاء طباعة مستجيبة باستخدام CSS

قد يكون تطوير موقع ويب به العديد من نقاط التوقف أمرًا مرهقًا. هناك العديد من التقنيات الجديدة التي يجب تعلمها في CSS ، سواء كنت مطورًا متمرسًا أو مطورًا متوسط ​​المستوى.

ولكن كيف تبدأ مع الطباعة سريعة الاستجابة؟ فيما يلي كيفية اتخاذ خطوات لتكييف صفحات الويب مع أي حجم شاشة.

أهمية الطباعة المستجيبة

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

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

إليك قالب رمز يمكنك نسخه إلى محرر التعليمات البرمجية قبل أن تبدأ ، حتى تتمكن من اتباع الأساليب التي ستتم مناقشتها.

ملف كود HTML

index.html
لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8">
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<وصلةrel="ورقة الأنماط"href="style.css">
<عنوان> الطباعة المستجيبة عنوان>
رأس>
<جسم>
<شعبةفصل="حاوية">
<h1> لوريم إيبسوم h1>
<ص> Lorem ipsum dolor sit، amet consectetur adipisicing elit. Ut، obcaecati. Corporis quam، blanditiis odit optio facilis magni doloribus adipisci في quaerat oluptas molestiae eius dicta officia quod eaque Persiciatis! 
ص>
شعبة>
جسم>
لغة البرمجة>

ملف كود CSS

/*style.css*/
جسم{
عرض: ثني;
تبرير المحتوى: مركز;
محاذاة العناصر: مركز;
ارتفاع: 100ه;
}
.حاوية{
عرض: 400مقصف;
لون الخلفية: الأبيض العتيقة;
حشوة: 15مقصف;
مربع الظل:0 2مقصف 5مقصفrgba(0,0,0, 0.1) ;
}
h1{
لون: وردي فاقع;
}

الآن ، دعنا نستكشف بعض الأساليب والتقنيات الفعالة لتنفيذ الطباعة سريعة الاستجابة باستخدام CSS

1. تحامل

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

المشبك (القيمة الدنيا ، القيمة المثالية ، القيمة القصوى):

h1{
حجم الخط: المشبك(2rem, 5فولكس فاجن, 3rem);
}
ص{
حجم الخط: المشبك(1rem, 3فولكس فاجن, 2rem);
}

في هذا المثال ، يتم تعيين أحجام خطوط العنوان والفقرة باستخدام وظيفة "clamp ()". بالنسبة إلى العنوان "h1" ، يتم تعيين الحد الأدنى للقيمة على "2rem" لضمان ألا يقل حجم الخط عن ضعف حجم خط الجذر. يتم تعيين القيمة المثالية أو المفضلة على "5vw" ، والتي تمثل 5٪ من عرض إطار العرض مما يجعلها تستجيب لأحجام الشاشات المختلفة. يتم تعيين الحد الأقصى للقيمة على "3 rem" مما يضمن أن حجم الخط لن يكون أكبر من ثلاثة أضعاف حجم خط الجذر. والعكس صحيح بالنسبة لتصميم الفقرة.

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

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

/ * حجم الخط الافتراضي * /
h1{
حجم الخط: 38مقصف;
}
ص{
حجم الخط: 20مقصف;
}
/ * حجم الخط للشاشات الصغيرة * /
@وسائط (أقصى عرض:800 بكسل){
h1{
حجم الخط: 32مقصف;
}
ص{
حجم الخط: 18مقصف;
}
}
/ * حجم الخط للشاشات الأصغر * /
@وسائط (أقصى عرض:400 بكسل){
h1{
حجم الخط: 28مقصف;
}
ص{
حجم الخط: 15مقصف;
}
}

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

3. خصائص CSS المخصصة

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

:جذر {
- حجم الخط - العنوان: 3rem;
- فقرة حجم الخط: 1.5rem;
}
h1{
حجم الخط: فار(- حجم الخط - العنوان);
}
ص{
حجم الخط: فار(- فقرة حجم الخط);
}
@وسائط (أقصى عرض:800 بكسل){
:جذر {
- حجم الخط - العنوان: 2rem;
- فقرة حجم الخط: 0.9rem;
}
}
@وسائط (أقصى عرض:400 بكسل){
:جذر {
- حجم الخط - العنوان: 1.5rem;
- فقرة حجم الخط: 0.8rem;
}
}

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

أفضل ممارسات الطباعة المستجيبة

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

h1{
حجم الخط: 2ه;
 }

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

الطباعة سريعة الاستجابة مفتاح تصميم الويب المقروء

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