توضح هذه المقالة خطوات إنشاء تصميم موقع ويب سريع الاستجابة في HTML و CSS باستخدام:
كيفية إنشاء تصميم موقع متجاوب باستخدام HTML و CSS؟
يتضمن إنشاء تصميم موقع ويب سريع الاستجابة باستخدام HTML و CSS إنشاء تخطيط يتكيف مع أحجام ودرجات دقة الشاشة المختلفة. فيما يلي الخطوات التي يمكنك اتباعها لإنشاء تصميم موقع ويب سريع الاستجابة:
الخطوة 1: Viewport Meta Tag
ال ' منفذ العرض 'meta tag تلعب دورًا حيويًا في إنشاء تصميم ويب سريع الاستجابة. يتم إدخاله داخل ' 'في ملف HTML الذي يحتوي على السمات التالية:
< ميتا اسم = 'منفذ العرض' محتوى = 'العرض = عرض الجهاز ، المقياس الأولي = 1' / >
تحتوي العلامة الوصفية أعلاه على سمتين:
- ال ' اسم ”تخبرنا اسم الوظيفة التي تم إنشاء / استخدام هذه العلامة من أجلها. على سبيل المثال ، تعيين ' منفذ العرض 'إلى' اسم ”للتعامل مع منفذ العرض للأجهزة المختلفة.
- ال ' محتوى ”تحدد قيمة السمة السابقة. يقوم بتعيين عرض كل جهاز ويقيس المستند / صفحة الويب إلى 100٪.
الخطوة 2: الصور المستجيبة
نظرًا لاختلاف حجم الصورة عن بعضها البعض ، فمن الصعب تعيين نفس ' ارتفاع ' أو ' عرض 'الملكية لكل صورة. عندما يكون حجم الصورة ثابتًا ، لا يقوم المستخدمون بتغيير حجم صورة صفحة الويب بالشاشة. ومع ذلك ، يمكن للمستخدمين تعيين الصورة سريعة الاستجابة عبر الكود التالي:
IMG {
الأعلى- عرض : 100 ٪؛
}
ال ' أقصى عرض تمنع خاصية CSS عرض الصورة داخل المساحة المخصصة لها. من خلال تعيين القيمة في '٪' ، يتم تغيير حجم الصورة جنبًا إلى جنب مع تغيير حجم عنصرها الأصلي. هذا يخلق تأثيرًا سريع الاستجابة للصورة.
الخطوة 3: تخطيط Flexbox
ينصح بشدة تخطيط Flexbox لإنشاء تصميم موقع ويب سريع الاستجابة. يسمح لعناصر HTML بالعرض في موضع معين وتغيير حجم المساحة المتاحة لكل طفل وفقًا للحجم المتاح بواسطة div الأصل. يحتوي تخطيط Flexbox على العديد من الخصائص التي توفر الكثير من الحرية للمطور كما في الكود أدناه:
< أسلوب >
.الأبوين {
العرض: فليكس ؛
}
.طفل {
ثني: 1 ؛
نص- محاذاة : مركز؛
}
< / أسلوب >
< جسم >
< شعبة فصل = 'الأبوين' >
< شعبة فصل = 'طفل' أسلوب = 'الحدود: 3 بكسل بلون أزرق ثابت ؛' > مرحبًا < / شعبة >
< شعبة فصل = 'طفل' أسلوب = 'border: 3px بلون darkgreen خالص ؛' > إلى < / شعبة >
< شعبة فصل = 'طفل' أسلوب = 'الحد: 3 بكسل أحمر خالص ؛' > لينكسينت / شعبة >
< / شعبة >
< / جسم >
في مقتطف الشفرة أعلاه:
- أولاً ، أنشئ عنصر div أصليًا بمعرف ' الأبوين 'داخل' <الجسم> ' بطاقة شعار.
- بعد ذلك ، أنشئ عناصر div فرعية متعددة وعيّن لهم فئة ' طفل '.
- ثم حدد ' الأبوين 'فئة وتقديم قيمة' ثني 'لـ CSS' عرض ' ملكية.
- بعد ذلك ، قدِّم قيمة ' 1 'إلى' ثني 'خاصية لكل' طفل 'التي تجعل العنصر الفرعي يظهر كعنصر مرن.
بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:
يوضح الإخراج أعلاه أن العنصر الفرعي يتساوى في العرض عندما يتم تغيير حجم المتصفح.
الخطوة 4: تخطيط الشبكة
يقوم تخطيط الشبكة بإنشاء شبكة وتعيين عناصر HTML داخل جزء الشبكة. تتغير عناصر الشبكة بالنسبة إلى حجم شاشة صفحة الويب. يقوم بإنشاء تصميم سريع الاستجابة حيث يتغير حجم عنصر HTML وفقًا لشاشة الجهاز:
< أسلوب >.حاوية {
عرض: شبكة ؛
أعمدة شبكة القوالب: 1fr 1fr 1fr ؛
}
< / أسلوب >
< جسم >
< شعبة فصل = 'عنصر' >
< شعبة أسلوب = 'border: 3px solid forestgreen؛' > لينكسينت / شعبة >
< شعبة أسلوب = 'border: 3px بلون darkgreen خالص ؛' > لينكسينت / شعبة >
< شعبة أسلوب = 'الحد: 3 بكسل أحمر خالص ؛' > لينكسينت / شعبة >
< / شعبة >
< / جسم >
في الكود أعلاه:
- أولاً ، أنشئ عنصر div أصلي وعيّن له فئة ' عنصر 'داخل' <الجسم> ' بطاقة شعار. بعد ذلك ، قم بإنشاء ثلاثة عناصر div فرعية فيه.
- ثم ، في ملف CSS ، عيّن ' شبكة 'قيمة إلى' عرض 'ملكية لـ' حاوية 'شعبة.
- بعد ذلك ، أنشئ ثلاثة أجزاء متساوية الحجم على صفحة الويب باستخدام الزر ' شبكة قالب العمود 'وضبطها على قدم المساواة مع' 1 فرنك 1 فرنك 'حيث fr تعني' جزء '.
بعد تجميع الكود أعلاه ، يبدو الإخراج كما يلي:
يعرض الإخراج أن divs يتم تغيير حجمها وفقًا لحجم الشاشة بنسب متساوية.
الخطوة 5: استعلامات الوسائط
يعد استخدام استعلامات الوسائط لإنشاء تصميم سريع الاستجابة نوعًا من الأشياء القديمة ولكن لا تزال معظم مواقع الويب تستخدم استعلامات الوسائط. يمكن إضافة استعلامات الوسائط مباشرة في ملف CSS بعد إضافة النمط الافتراضي لعنصر HTML المحدد. الاستعلام عن الوسائط يجعل الشفرة أطول قليلاً وفوضوية. لأن المطور يحتاج إلى إدخال رمز لكل حجم شاشة على حدة.
على سبيل المثال ، راجع مقتطف الشفرة أدناه:
@ وسائط الشاشة و ( دقيقة- عرض : 640 بكسل ) {.عنصر {
خلفية- لون : forestgreen؛
}
}
في مقتطف الشفرة أعلاه:
- أولاً ، قم بتعيين استعلام الوسائط الذي يطبق خصائص CSS على فئة العنصر المحدد ' عنصر 'عندما يزيد عرض حجم الشاشة عن' 640 بكسل '.
- بعد ذلك ، حدد 'فئة المكون وتعيين قيمة' فورستجرين 'من أجل' لون الخلفية ' ملكية.
.عنصر {
خلفية- لون : المراوغ الأزرق؛
}
}
ثم بالنسبة لمقتطف الشفرة أعلاه:
- قم بتعيين استعلام الوسائط لتطبيق الأنماط عندما يكون حجم العرض أصغر من ' 1000 بكسل '.
- الآن ، حدد ' عنصر 'فئة وتقديم قيمة' المراوغ الأزرق 'من أجل' لون الخلفية ' ملكية:
بعد تنفيذ مقتطفات التعليمات البرمجية أعلاه ، يبدو الإخراج كما يلي:
يعرض الإخراج أن استعلام الوسائط يقوم بتغيير الخلفية بناءً على حجم الشاشة. يمكن أيضًا تطبيق حجم الخط والعرض والارتفاع وخصائص CSS الأخرى باتباع نفس النمط.
أحجام شاشات نقاط التوقف المحتملة التي يجب أخذها في الاعتبار أثناء استخدام استعلامات الوسائط هي:
- ل ' صغير 'بحجم الشاشة ، اضبط العرض ليكون أصغر من' 640 بكسل '.
- ل ' واسطة 'حجم شاشة منفذ العرض ، يتراوح العرض بين' 641 بكسل ' و ' 1007 بكسل '.
- ل ' كبير 'بحجم الشاشة ، اضبط العرض على' 1008 بكسل ' أو أكبر.
خاتمة
لإنشاء تصميم موقع ويب سريع الاستجابة ، يحتاج المطورون إلى إضافة ' منفذ العرض 'في' 'قسم العلامة. بعد ذلك ، استخدم ' فليكس بوكس ' و ' شبكة ' تَخطِيط. تساعد وحدات التخطيط هذه في إنشاء تصميم سريع الاستجابة. في النهاية ، ' تساؤلات الإعلام 'المطور في تصميم إصدارات مختلفة من نفس موقع الويب لأحجام مختلفة للشاشات. لقد أوضحت هذه المقالة الخطوات التي يمكن من خلالها إنشاء تصميم موقع ويب سريع الاستجابة.